Chapter 02

クライアントアプリ(Nuxt.js)をデプロイしてアプリケーションを公開する方法

sotaro116
sotaro116
2022.08.24に更新

本セクションの目標

  • 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
脚注
  1. 今回は雛形アプリを提供しましたが、プロジェクト初期はそれぞれの案件ごとに雛形を作成する必要があります。
    詳しくは以下

    ↩︎
  2. 今回はS3を自身で作成して、手でS3バケットにデプロイしましたが、実業務では行いません

    • S3は相対基盤のシス推部が作成してくれます
    • 実際はcodePipelineを使ってCI/CDのパイプラインとしてデプロイします
    ↩︎ ↩︎