🗒️
【Nuxt.js v2 × Amplify】Amplifyプロジェクトの作成
前提条件
・Nuxt.jsプロジェクトが作成済みであること
・AWSのアカウントを作成済みであること
・Amplify CLIの初期設定(amplify configure)済みであること
プロジェクトの初期設定
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.jsonのscriptsに記述されているコマンドを確認して入力します。(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