本セクションの目標

• Nuxt.jsで作成するSPAのアプリケーションのデプロイ方法を理解する

今回実施すること

• Nuxt.jsで作成したクライアントアプリケーションをS3にデプロイする
• デプロイしたアプリケーションをインターネット経由でアクセスする

前提

• 一部実務では行わない作業・設定があります
• 実際の業務では後ほどの章で説明のあるCodePipelineを用いてデプロイを行います

AWSのサービスを使ってアプリケーションを公開する方法

• S3
  • SPA(Single Page Application)をデプロイする場合に用います
  • 静的WEBホスティングという機能を使います
  • 基本デジ開部のアプリケーションはSPAなのでS3を利用しています
• Fargate
  • アプリケーションをコンテナ上で動作させる場合に用います
  • S3では実現できないSSR(サーバーサイドレンダリング)等の方式でデプロイする場合に用います
• EC2
  • アプリケーションをサーバー上で動作させる場合に用います
  • 今時使わない（サーバー必要な場合は基本Fargateを使う）

ハンズオン

1. Nuxt.jsのアプリケーションをビルドする

   1. 以下のS3バケットからzipファイルをダウンロード^[1]
   2. ローカルでzipファイルを解凍する
   3. vscodeで解凍したファイルを開く(以下の画面になればOK)
   4. vscodeの統合ターミナルを開く(ctrl + @)
   5. 統合ターミナルでpackage.jsonがある階層(基本プロジェクトのルートディレクトリ)に移動して以下コマンドをたたく

      npm run dev
      

      
      このコマンドはローカルで動作確認するときに使う必須コマンドなので、覚えておいてください。
   6. localhost:3000にアクセスして以下の画面になれればOK
      
      このあとの手順を行った最後にhttps://~のURLでアクセスしてこの画面が表示出来ればデプロイ完了
   7. 統合ターミナルで ctrl + c でプロセスを終了
   8. 統合ターミナルでpackage.jsonがある階層に移動して以下コマンドをたたく

      npm run build
      

      
   9. 完了するとプロジェクトのルートディレクトリにdistという名前のディレクトリが生成されればOK
      
      このディレクトリ内の資源をサーバー（今回はS3）にデプロイすることでアプリケーションをhttps://~のURLからアクセスすることが出来る。
      distディレクトリの中身を見ると、html・jsのファイルが出力されるはずです。このビルドの作業でVue.jsやNuxt.jsの拡張子である.vueファイルをブラウザが解釈できる状態になると思ってもらえると良いかと思います。

2. S3の静的Webホスティングの設定をする^[2]

   1. AWSのマネジメントコンソールに事前に渡されているIAMユーザーとPWでログイン
      
   2. S3のサービスを開く
      
   3. 「バケットを作成ボタン」を押下する
   4. バケット名を以下の命名で作成する
      aws-training-20211006-チーム番号
      
   5. 画面最下部の「バケットを作成」ボタンを押下する
   6. S3バケットの一覧ページに戻って、5で作成したバケットを選択する
   7. 「アクセス許可」タブを開き、「ブロックパブリックアクセス (バケット設定)」の「編集」ボタンを押下する
      
   8. 「パブリックアクセスをすべてブロック」のチェックを外して「変更の保存」ボタンを押下する
      
   9. 「プロパティ」タブを選択し、画面最下部の「静的ウェブサイトホスティング」の「編集ボタン」を押下する
      
   10. 以下の入力欄を矢印の右側の値に変更して「変更の保存」ボタンを押下する
       • 無効にする→有効にする
       • インデックスオブジェクト→index.html
         デフォルトが「無効にする」になっているはずなので、「有効にする」ボタンにチェックを入れて「変更の保存」ボタンを押下する。
         ここでインデックスオブジェクトをnpm run buildで生成したdistディレクトリにあるindex.htmlとすることが重要。
   11. 設定が完了すると、「静的ウェブサイトホスティング」の設定欄に「バケットウェブサイトエンドポイント」が生成されるので、手元に控えておく
       ＊現時点でアクセスしても403エラーが表示されるはず

3. ビルドしたファイルをS3にデプロイする^[2:1]

   1. 2で作成したS3バケットの「オブジェクト」タブを開く
   2. windowのエクスプローラーを開いて1で作成したdistファイルを開く
   3. distファイルの中身をすべて選択し、AWSマネジメントコンソール上にドラッグアンドドロップする
      
   4. 「アップロード」ボタンを押下する
      
   5. アップロードされたファイル全てを選択して、アクションボタンを押下する
      
   6. 「公開する」ボタンを押下する
      
   7. 2の11で控えていたURLにアクセスして、ローカルで動作確認したときと同じ画面になっていればOK