AWS Amplify part4 〜Vueチュートリアルアプリデプロイ編〜
はじめに
AWS Amplifyのpart4、Vueチュートリアルアプリデプロイ編です。前回まではミドルウェアとフレームワークの環境構築が完了しました。
今回は、アプリ作成前の残りの環境構築手順とデプロイ手順について記載しています。
デプロイ手順
- Vueプロジェクトの作成
- Amplify Vueモジュールをインストール
- VueプロジェクトをAmplifyプロジェクトとして初期化
- 静的ホスティングページとして登録
1. Vueプロジェクトの作成
testというVueプロジェクトを新規作成します。設定は下記のようにしましょう。
```
[root@ip-172-31-38-5 ~]$ vue create test
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
```ここで一度、Vueのチュートリアルアプリが表示できるか確認してみましょう。
```
[root@ip-172-31-38-5 ~]$ cd test
[root@ip-172-31-38-5 ~]$ npm run serve
DONE Compiled successfully in 2381ms 1:29:59 AM App running at:
- Local: http://localhost:8080/
- Network: http://xxx.xxx.xxx.xxx:8080/ Note that the development build is not optimized.
To create a production build, run npm run buil
```
ここで、EC2のグローバルIPにアクセスして、ブラウザから表示されるか確認してみます。
グローバルIPの確認は、AWSのマネージメントコンソールからも可能ですが、下記コマンドでも簡単に確認できます。
```
[root@ip-172-31-38-5 ~]$ curl globalip.me
13.xx.xx.xxx
```このIPをChromeなどのブラウザに入力すると下記のような画面が表示されれば成功です。
```
確認URL：http://13.xx.xx.xxx:8080
```
注意点として、8080ポートをセキュリティグループに追加しておかないと画面が表示されないため、
事前に追加しておきましょう。
2. Amplify Vueモジュールをインストール
AmplifyでVueを利用するためにVueのモジュールをインストールします。```
[root@ip-172-31-38-5 ~]$ npm install aws-amplify
[root@ip-172-31-38-5 ~]$ npm install aws-amplify-vue
3. VueプロジェクトをAmplifyプロジェクトとして初期化
バックエンドの機能追加に伴うコード自動生成とフロントエンドに紐づくバックエンドの機能の連携をAmplify CLIから実行できるように初期化を行います。下記のように設定しましょう。
```
[root@ip-172-31-38-5 test]$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project test
? Enter a name for the environment dev
? Choose your default editor: Vim (via Terminal, Mac OS only)
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path: src
? Distribution Directory Path: dist
? Build Command: npm run build
? Start Command: npm run serve
```4. 静的ホスティングページとして登録
S3に静的ページをホスティングできるように、下記のコマンドで登録してあげます。設定は下記のように行ってください。
「Select the environment setup」を「DEV」だとS3のみ導入されますが、
「PROD」を選択すると、Cloudfront + S3の構成でデプロイされます。
```
[root@ip-172-31-38-5 test]$ amplify add hosting
? Select the plugin module to execute Amazon CloudFront and S3
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name test-xxxxxxxx-hostingbucket
? index doc for the website index.html
? error doc for the website index.html
You can now publish your app using the following command:
Command: amplify publish
```この後に、上記の最終行に記載のコマンドを使用して設定を反映します。
こちらのコマンドを実行しないと、実環境に反映されないので注意してください。
```
[root@ip-172-31-38-5 test]# amplify publish
✔ Successfully pulled backend environment dev from the cloud.
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | --------------- | --------- | ----------------- |
| Hosting | S3AndCloudFront | Create | awscloudformation |
? Are you sure you want to continue? Yes
⠏ Updating resources in the cloud. This may take a few minutes...
UPDATE_IN_PROGRESS amplify-test-dev-10015 AWS::CloudFormation::Stack Fri Sep 04 2020 01:03:43 GMT+0000 (Coordinated Universal Time) User Initiated
CREATE_IN_PROGRESS hostingS3AndCloudFront AWS::CloudFormation::Stack Fri Sep 04 2020 01:03:48 GMT+0000 (Coordinated Universal Time)
⠋ Updating resources in the cloud. This may take a few minutes...
UPDATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Fri Sep 04 2020 01:03:48 GMT+0000 (Coordinated Universal Time)
⠙ Updating resources in the cloud. This may take a few minutes...
```こちらの更新が走って最下行がこのようになれば、S3に静的ホスティングができています。
URLが記載されているので、ブラウザに入力して確認してみましょう。
表示に問題なければデプロイ成功です。
```
⠏ Building for production...
DONE Compiled successfully in 6631ms 1:04:53 AM
File Size Gzipped
dist/js/chunk-vendors.d55d36c0.js 129.86 KiB 44.88 KiB
dist/js/app.0969cd9b.js 6.36 KiB 2.29 KiB
dist/js/about.42e0099c.js 0.44 KiB 0.31 KiB
dist/css/app.ab586865.css 0.42 KiB 0.26 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
frontend build command exited with code 0
Publish started for S3AndCloudFront
✔ Uploaded files successfully.
Your app is published successfully.
http://test-xxxxxxx-hostingbucket-dev.s3-website-ap-northeast-1.amazonaws.com
```最下行の、このURLにアクセス
```
http://test-xxxxxxx-hostingbucket-dev.s3-website-ap-northeast-1.amazonaws.com
```
まとめ
今回はAmplifyでVueのチュートリアルアプリをデプロイする手順を紹介しました。次回は、Githubに上がっているフリーのソースコードを使ってアプリをデプロイしてみたいと思います。