🗒️

【Nuxt.js × Amplify】Nuxtプロジェクトの初期設定

1 min read

前提条件

・Nuxt.jsプロジェクトが作成済みであること
・AWSのアカウントを作成済みであること
・Amplify CLIの初期設定(amplify configure)済みであること

https://zenn.dev/kokota/articles/c7de1b5ad90509

プロジェクトの初期設定

cd <プロジェクトディレクトリ>
amplify init

上記コマンドを実行すると、質問が表示されるので回答を入力していきます。

  • プロジェクト名
? Enter a name for the project <プロジェクト名>
  • 環境名
    いきなり本番環境ということは無いと思うので、ここはdevと入力しておきましょう。
? Enter a name for the environment dev
  • コードエディター
? Choose your default editor: Visual Studio Code
  • 言語
? Choose the type of app that you're building javascript
  • フレームワーク
? What javascript framework are you using vue
  • ソースディレクトリ
    Amplifyのソースファイルが格納されるディレクトリ名です。特段の理由がなければデフォルトのsrcとしておきましょう。
? Source Directory Path:  src
  • 配布用ディレクトリ
    Nuxtのホスティング用のファイルが格納されるディレクトリです。
? Distribution Directory Path: dist
  • コマンド
    プロジェクト直下にあるpackage.jsonscriptsに記述されているコマンドを確認して入力します。(yarnを使用している場合は、npm→yarnに書き換えてください。)
? Build Command:  npm run build
? Build Command:  npm run start

※デフォルトではnpm run-script 〜と表示されますが、runはrun-scriptの省略形なのでどちらを使用しても同じです。

  • 認証方法
    Amplify CLIの初期設定でプロファイルを作成しているのでAWS profileを選択し、作成したプロファイル名を指定します。
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use <プロファイル名>

これでイニシャライズが実行されます。

Amplifyコンソールを確認

以下のコマンドを実行し、質問にAmplify consoleと答えると、Amplifyコンソールのページが表示されます。

amplify console
? Which site do you want to open? Amplify console

以下の通り、Amplifyの環境が構築されているのが確認できます。

Discussion

ログインするとコメントできます