AWS Amplify part5 〜買い物カートアプリデプロイ編〜
はじめに
AWS Amplifyのpart5、買い物カートアプリデプロイ編です。今回は、Githubのオープンソースで上がっている買い物カートアプリのサンプルソースコードを使用して、
アプリ作成前の残りの環境構築手順とデプロイ手順について記載しています。
利用するソース
- crisgon/vue-cart
- シッピングカードのオープンソース(MITライセンス)
デプロイ手順
- EC2へGitをインストール
- ソースをクローン
- VueプロジェクトをAmplifyプロジェクトとして初期化
- 静的ホスティングページとして登録
1. EC2へGitをインストール
ソースコードをクローンする前に、EC2へGitがはいっていないため、yumを使ってGitをインストールしましょう。
インストールするバージョンを確認されるため、「y」と入力します。
```
[root@ip-172-31-38-5 ~]$ yum install git
Loaded plugins: extras_suggestions, langpacks, priorities, update-motd
Resolving Dependencies
--> Running transaction check
---> Package git.x86_64 0:2.23.3-1.amzn2.0.1 will be installed
--> Processing Dependency: perl-Git = 2.23.3-1.amzn2.0.1 for package: git-2.23.3-1.amzn2.0.1.x86_64
--> Processing Dependency: git-core-doc = 2.23.3-1.amzn2.0.1 for package: git-2.23.3-1.amzn2.0.1.x86_64
--> Processing Dependency: git-core = 2.23.3-1.amzn2.0.1 for package: git-2.23.3-1.amzn2.0.1.x86_64
--> Processing Dependency: emacs-filesystem >= 25.3 for package: git-2.23.3-1.amzn2.0.1.x86_64
--> Processing Dependency: perl(Term::ReadKey) for package: git-2.23.3-1.amzn2.0.1.x86_64
--> Processing Dependency: perl(Git::I18N) for package: git-2.23.3-1.amzn2.0.1.x86_64
--> Processing Dependency: perl(Git) for package: git-2.23.3-1.amzn2.0.1.x86_64
--> Processing Dependency: libsecret-1.so.0()(64bit) for package: git-2.23.3-1.amzn2.0.1.x86_64
--> Running transaction check
---> Package emacs-filesystem.noarch 1:25.3-3.amzn2.0.1 will be installed
---> Package git-core.x86_64 0:2.23.3-1.amzn2.0.1 will be installed
---> Package git-core-doc.noarch 0:2.23.3-1.amzn2.0.1 will be installed
---> Package libsecret.x86_64 0:0.18.5-2.amzn2.0.2 will be installed
---> Package perl-Git.noarch 0:2.23.3-1.amzn2.0.1 will be installed
--> Processing Dependency: perl(Error) for package: perl-Git-2.23.3-1.amzn2.0.1.noarch
---> Package perl-TermReadKey.x86_64 0:2.30-20.amzn2.0.2 will be installed
--> Running transaction check
---> Package perl-Error.noarch 1:0.17020-2.amzn2 will be installed
--> Finished Dependency Resolution
Dependencies Resolved
==============================================================================================================================================================================================================================================
Package Arch Version Repository Size
==============================================================================================================================================================================================================================================
Installing:
git x86_64 2.23.3-1.amzn2.0.1 amzn2-core 135 k
Installing for dependencies:
emacs-filesystem noarch 1:25.3-3.amzn2.0.1 amzn2-core 64 k
git-core x86_64 2.23.3-1.amzn2.0.1 amzn2-core 5.0 M
git-core-doc noarch 2.23.3-1.amzn2.0.1 amzn2-core 2.4 M
libsecret x86_64 0.18.5-2.amzn2.0.2 amzn2-core 153 k
perl-Error noarch 1:0.17020-2.amzn2 amzn2-core 32 k
perl-Git noarch 2.23.3-1.amzn2.0.1 amzn2-core 47 k
perl-TermReadKey x86_64 2.30-20.amzn2.0.2 amzn2-core 31 k
Transaction Summary
==============================================================================================================================================================================================================================================
Install 1 Package (+7 Dependent packages)
Total download size: 7.9 M
Installed size: 41 M
Is this ok [y/d/N]: y
```Gitがインストールされているか確認します。
```
[root@ip-172-31-38-5 ~]$ git --version
git version 2.23.3
```2. ソースをクローン
Githubからソースコードをクローンします。クローン対象のURLは下記を参照ください。
下記のようにgit cloneしてソースをダウンロードします。
```
[root@ip-172-31-38-5 ~]$ git clone https://github.com/crisgon/vue-cart.git
Cloning into 'vue-cart'...
remote: Enumerating objects: 307, done.
remote: Total 307 (delta 0), reused 0 (delta 0), pack-reused 307
Receiving objects: 100% (307/307), 415.91 KiB | 593.00 KiB/s, done.
Resolving deltas: 100% (152/152), done.
```ダウンロードされているか確認しましょう。
```
[root@ip-172-31-38-5 ~]$ ll
total 88
drwxr-xr-x 63 root root 4096 Sep 3 13:08 node_modules
-rw-r--r-- 1 root root 83513 Sep 3 13:08 package-lock.json
drwxr-xr-x 7 root root 244 Sep 4 01:04 test
drwxr-xr-x 8 root root 279 Sep 4 01:13 vue-cart
```
ダウンロードしたアプリにチェンジディレクトリします。
その後、AmplifyのVueモジュールをインストールします。
```
[root@ip-172-31-38-5 ~]$ cd test
[root@ip-172-31-38-5 ~]$ npm install aws-amplify
[root@ip-172-31-38-5 ~]$ npm install aws-amplify-vue
```
2. VueプロジェクトをAmplifyプロジェクトとして初期化
こちらは前回の記事と同様にAmplifyを初期化します。```
[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 vuecart
? Enter a name for the environment dev
? Choose your default editor: None
? 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
```3. 静的ホスティングページとして登録
S3に静的ページをホスティングできるように、下記のコマンドで登録してあげます。設定は下記のように行ってください。
「Select the environment setup」を「DEV」だとS3のみ導入されますが、
「PROD」を選択すると、Cloudfront + S3の構成でデプロイされます。
```
[root@ip-172-31-38-5 vue-cart]# 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 vuecart-xxxxhostingbucket
? index doc for the website index.html
? error doc for the website index.html
```この後に、上記の最終行に記載のコマンドを使用して設定を反映します。
こちらのコマンドを実行しないと、実環境に反映されないので注意してください。
```
[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が記載されているので、ブラウザに入力して確認してみましょう。
表示に問題なければデプロイ成功です。
```
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
frontend build command exited with code 0
Publish started for S3AndCloudFront
✔ Uploaded files successfully.
Your app is published successfully.
http://vuecart-xxxxx-hostingbucket-dev.s3-website-ap-northeast-1.amazonaws.com
```最下行の、このURLにアクセス
```
http://vuecart-xxxxx-hostingbucket-dev.s3-website-ap-northeast-1.amazonaws.com
```
このような表示がされれば成功です！
まとめ
これで、フロントエンド開発したアプリをAmplifyを利用して簡単にデプロイする方法を紹介しました。次の勉強会では、ログイン認証などのバックエンド の機能と連携した内容を紹介したいと思います。