札幌市のWeb・ホームページ制作|株式会社マーベリックスServiceCompanyMessageCrewBlogRecruitContactBLOGALLCHALLENGEEVENTGOURMETNEWSTECH【vue.js】AWS-S3へ簡単にファイルをアップロードする方法2019.11.20TECHこんにちは、タロウです。今後使う機会が増えそうなので書き残します!S3にファイルをアップロードする際、大きく2つの方法で迷います。クライアントサイドから直接S3にアップロードさせるクライアントサイドからサーバAPIを経由してS3にアップロードどっちで実装しよう。クライアントサイドから直接S3にアップロードさせるクライアント側にS3のアクセスキーを持たなければいけないためセキュリティリスクが高いです。それも承知の上・・であれば、期限付きURLを発行して直接アップロードさせる方法が良いです。クライアントサイドからサーバAPIを経由してS3にアップロード今回はこちらの方法を書き留めます。(これを実装すれば直接アップロードも機能を削るだけで出来ます)クライアントサイド、サーバAPIのS3の連携部分と分けて解説します!完成形ぼく、水彩画の線結構好き。くじバケットの準備プラグインを入れようクライアントサイドサーバサイドAPIバケットの準備AWSコンソールにログインしてS3の設定画面からバケットを作成します。バケット名とリージョンを設定して、あとはデフォルトのまま進めます。(パブリックアクセスはOFFにしておきます)プラグインを入れようAWSでnodejs用のプラグインが準備されているので、インストールします。fsAWSを操作するためのライブラリと、nodejsでファイル操作を行うためのライブラリをインストールします。クライアントサイド最低限のファイル選択と、ボタンを配置してます。},};</script><style></style>axiosでExpressjsで作成したAPIを呼ぶようにしてます。サーバサイドVueから受けとったファイルをS3にアップロードする処理を実装します。npmでインストールしたaws-sdkを使用するとすごく簡単です。});};実装は以上になります!画面からファイルを選択しアップロードするとS3にファイルがアップロードされているはずです!余談:S3にアップロードしたファイルを期限付きURLを発行して参照する方法も紹介します。url);});グローバルにしたくない・・けど、ユーザーにS3から直接ダウンロードさせたい・・時などに使えます!昔にPHPでも実装したので、PHP版はこちらをご参照ください!まとめS3へのアクセスでよく使いそうなロジックを実装してみました!ほかにもファイル一覧を返却したり、削除したりと一通りの操作が簡単に実装できます。最新の記事Taroディレクターも、サーバ構築も、ゴリゴリ開発もやります。スパイスも甘いものも大好き。SAKURAGI2020.1.16EVENTスパイスからドライキーマカレーを作りました!2020.1.15CHALLENGECATEGORYCHALLENGEEVENTGOURMETNEWSTECH。