NodeとAWSS3を使用して簡単な画像アップロードを設定する方法

画像またはファイルをAmazonS3サービスにアップロードする方法を説明するステップバイステップガイド。

これは、コードのサーバー(Node.js)部分を処理するチュートリアルの最初の部分です。

YouTubeでもビデオチュートリアルを用意しました。この記事の下部にあるリソースにリンクがあります。

1.インストールする必要があるものと簡単な説明。

multer:データファイルを処理するためのミドルウェア。主にファイルのアップロードに使用されます。詳細:Npmリンク

multer-s3: AmazonS3サービスにファイルを簡単にアップロードするためのmulter拡張子。詳細:Npmリンク

aws-sdk: AWS(アマゾンウェブサービス)と連携するために必要なパッケージ。私たちの場合、S3サービス。詳細:Npmリンク

プロジェクトに移動して、パッケージをインストールしましょう。

npm install —-save multer multer-s3 aws-sdk

2.AWSにサインアップします

まず、// aws.amazon.comにアカウントを作成しましょう。Amazonは、1年目に使用できる驚くべき無料利用枠を提供しています。ログイン後、S3サービスを検索します。

簡単に言うと、S3はファイルを保存するためのクラウドサービスです。

バケット作成する必要があります。バケットはファイルのフォルダーとして想像できます。バケット名リージョンを選択します。これは単純なセットアップであるため、他の構成には関心がありません。(デフォルトの設定は問題ありません—何かが明確でない場合は、コメントで質問してください)。レビューが表示されるまで「次へ」をクリックして、バケットを作成します。

作成したバケットに移動し、URLバーを確認します。バケット名(私にとっては「medium-test」)と地域(私にとっては「us-east」)を覚えておいてください。

次に、安全な資格情報を取得する必要があります。アカウント名から「私のセキュリティ資格情報」に移動します。次に、「アクセスキー」と「新しいアクセスキーの作成」を選択します

キーを他人と共有しないでください。ファイルのアップロードを設定するにはキーが必要なため、これらのキーを一時的にファイルに保存するか、キーファイルをダウンロードします。

大丈夫。Amazonのセットアップが完了しました!

3.コーディングエディタに移動します

ここでは、NodeまたはExpressの基本については説明しません。このチュートリアルは、ファイルのアップロードのみに焦点を当てています。プロジェクト全体の実装に興味がある場合は、GitHubリポジトリを確認するか、チュートリアル全体をご覧ください。(このブログ投稿の最後にリンクがあります)。

  1. 次の実装(最初の部分)を使用してファイルアップロードサービスを作成します。

重要な注意:秘密の資格情報をファイルに直接公開しないでください。秘密の資格情報を決して共有しないでください!ローカル環境で環境変数を設定することを検討してください。デプロイされたプロジェクトの場合は、クラウドプロバイダーで変数を設定してください。最善の解決策は、aws-profilesを使用することです://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html。

まず、インストールされているすべてのパッケージをインポートします。第二の部分はしている私たちのAWSを設定します。前に示したURLバーから秘密鍵と地域を提供する必要があります。

AWSの設定後、AmazonS3のインスタンスを作成できます。まだ完成していません。それでは、この実装の2番目の部分を見てみましょう。

これで、マルチアップロードのソリューションを設定できます。次のプロパティを持つ関数をmulterオブジェクトに提供する必要があります。

  1. s3:以前に作成したAmazonS3のインスタンス。
  2. バケットバケットの名前(私の場合:「中程度のテスト」)
  3. acl:ファイルのアクセス制御(「パブリック読み取り」は誰でもファイルを表示できることを意味します)、ここで利用可能なすべてのタイプを確認できます:amazon link
  4. metada:アップロードされたファイルのメタデータを設定するコールバック関数。ここでは、fieldNameに追加のメタデータを設定しています。このデータは次の画像で確認できます。

5. key:keyプロパティ(ファイルがバケットに保存されるキー)を設定するためのコールバック関数。この例では、現在の時刻のタイムスタンプを作成し、このファイルをこの名前で保存しています。このように、ファイル名は常に一意になりますが、任意の名前を選択できます。

すべてのセットアップが完了したら、アップロードオブジェクトをエクスポートして、他のファイルで使用できるようにします。

4.画像をアップロードするルートを設定します

ほぼ完了しましたが、アプリのユーザーはまだ画像のアップロードにアクセスできません。この機能を彼らに公開する必要があります。ファイルを保存するためのエンドポイントを作成しましょう。

以前に作成したアップロードオブジェクトをエクスポートし、そこから新しいオブジェクトを作成しています。新しいものは、単一の画像アップロードの追加構成でより具体的です。' image '値を提供しています。このキーでサーバーにファイルを送信するため、この値は非常に重要です。

2番目の部分はルート自体です。' / image-upload 'へのPOSTエンドポイント。内部では、singleUploadを呼び出します。multerはreqオブジェクトからサーバーに送信するファイルを取得するため、reqとresの内部渡すことを忘れないでください。

エラーをチェックしています。存在しない場合は、ファイルの場所の値を含むJSONを送り返します。これはAmazon上のファイルへの単なるURLです。

ああ、それだけです!今すぐAmazonS3にファイルをアップロードできます。とても簡単です、あなたはどう思いますか?

5.Postmanでテストしてみましょう。

ハードワークの結果を確認するには、アップロードする画像を含むリクエストをサーバーに送信する必要があります。このパートでは、Postmanを介してテストします。チュートリアルの次のパートでは、Angularアプリケーションで実装を作成します。

Postmanをお持ちでない場合は、GoogleChrome拡張機能としてダウンロードできます。' postman google chromeextension 'を検索してください。Postmanは、サーバーへのリクエストを簡単に初期化、送信、テストするためのアプリケーションです。

  1. 以前に作成したエンドポイントにPOSTリクエスト送信します。私の場合、/ image-uploadのノードパスで指定しました。
  2. フォームデータの本文を選択します
  3. 画像キーを入力します。これは、以前にコードで設定したキーであることがわかります。ファイルを確認し、コンピューターからファイルを選択します。
  4. リクエストを送信します。

アップロードしたファイルのURLを含むJSONを取得する必要があります。

Voilà!それはみんなです。これは、Nodeの単純なファイルアップロードです。次の記事では、Angularのフロントエンドの実装を続けます。

このチュートリアルが気に入った場合は、Udemyの完全なコースを確認してください—完全なAngular、React、Nodeガイド| Airbnbスタイルのアプリ。

ビデオ講義: Youtubeビデオ

完了したプロジェクト:私のgithubリポジトリ

乾杯、

フィリップ