AWS Amplify + Vue.js の環境を Docker を使って作ってみる

仕事で使う技術的なこと

「AWS Amplify + Vue.js」がナウいのかなと思って、どうせなら Docker でコンテナにして再利用できるようにしたほうがいいよねと思って、やってみました。
備忘録として残しておきます。

環境

  • Windows 10 Home
    • Docker Desktop インストール済み
  • AWSの無料利用枠を使用

Docker のコンテナを作成

以下のファイルを作ります。

Dockerfile
FROM node:12.4

RUN apt-get update
RUN npm install -g @vue/cli
RUN npm install -g @aws-amplify/cli

WORKDIR /AmplifyDemo
docker-compose.yml
version: "3"

services:
  amplify:
    build: ./
    ports:
      - 8000:8000
      - 8081:8080
    stdin_open: true
    volumes:
      - ./dev/:/AmplifyDemo
      - ./dev/aws/:/root/.aws/
    tty: true

以下の通り起動します。

$ docker-compose up -d

コンテナイメージのビルドにはそこそこ時間がかかります。
自分の環境では５分くらいかかりました。

以下のコマンドでコンテナの中に入ります。

$ docker exec -it コンテナ名 bash

ちなみに[コンテナ名]は、 docker ps で確認できます。

ここまでできたらいったん git リポジトリとしてコミットしました。
作成したコンテナの設定ファイルは以下に置いています。

GitHub - tassi-yuzukko/aws-amplify-demo
Contribute to tassi-yuzukko/aws-amplify-demo development by creating an account on GitHub.
github.com

dev フォルダ内をマウント用ボリュームとしているので、.gitignore に無視フォルダとして設定しています。
（dev/aws に個人用認証ファイルとかが展開されるので git 管理するなら必ず無視設定しておく必要があります）

Amplify の認証設定

上記の続きで、docker のコンテナ内で操作します。
カレントが AmplifyDemo ディレクトリであることを確認し、以下の通り amplify configure を実行します。

root@xxxxxxx:/AmplifyDemo# amplify configure
Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:

https://console.aws.amazon.com/
console.aws.amazon.com

Press Enter to continue

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-demo-20210926     # ※ここはとりあえず適当でいい
Complete the user creation using the AWS console

https://console.aws.amazon.com/iam/home?region=ap-northeast-1#/users$new?step=final&accessKey&userNames=amplify-demo-20210926&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
console.aws.amazon.com

Press Enter to continue

# ※ここでブラウザに飛ばされるので、AWSにログインし、上記で入力したユーザー名（ここだと「amplify-demo-20210926」）で画面の指示通りに IAM ユーザーを作成する

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  default

Successfully set up the new user.

これで、AmplifyDemo/aws 配下に credentials と config が生成されます。

vue でデモアプリのプロジェクトを初期化作成

以下の通り、vue create demo で demo フォルダに vue のプロジェクトが自動生成されます。

root@xxxxxx:/AmplifyDemo# vue create demo
?  Your connection to the default yarn registry seems to be slow.  
   Use https://registry.npm.taobao.org for faster installation? Yes

Vue CLI v4.5.13
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint) # ※vue 3を選択します
? Pick the package manager to use when installing dependencies: NPM # ※npm を選択します

Vue CLI v4.5.13
✨  Creating project in /AmplifyDemo/demo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

[ .................] / fetchMetadata: sill pacote range manifest for is-color-stop@^1.0.0 fetc[ .................] | fetchMetadata: sill pacote range manifest for svgo@^1.0.0 fetched in 19> yorkie@2.0.0 install /AmplifyDemo/demo2/node_modules/yorkie
> node bin/install.js

setting up Git hooks
done

> core-js@3.18.0 postinstall /AmplifyDemo/demo2/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

> ejs@2.7.4 postinstall /AmplifyDemo/demo2/node_modules/ejs
> node ./postinstall.js

added 1260 packages from 655 contributors in 138.79s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 71 packages from 77 contributors in 70.734s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project demo.
👉  Get started with the following commands:

 $ cd demo
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.

次にモジュールをインストールします。

root@xxxxxx:/AmplifyDemo# cd demo
root@xxxxxx:/AmplifyDemo/demo# npm install

これで、デモプロジェクトの初期化生成が完了したので、npm run serve --open で起動して確認します。

root@xxxxxx:/AmplifyDemo/demo# npm run serve --open

> demo@0.1.0 serve /AmplifyDemo/demo
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 36908ms                                                                                                                                          12:10:58 PM

  App running at:
  - Local:   http://localhost:8081/

  It seems you are running Vue CLI inside a container.
  Access the dev server via http://localhost:<your containers external mapped port>/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

今回は、docker-compose.yml の設定で、ポート8081を開放しているので、上記にある通り http://localhost:8081/ にアクセスします。

下記のようなサイトがブラウザに表示されたらとりあえずここまでは成功です。

ここで作成された vue プロジェクトは、docker 起動にボリュームをマウントしているので、windows のフォルダ階層上は、Dockerfile があるフォルダをカレントとすると、.\dev\demo に展開されているはずです。

docker のリポジトリ内にはありますが、今回はあえて git 管理対象外（無視フォルダ対象）にしているので、必要に応じて別途コミット等します。
（docker とは関係ないので、別管理するほうが良いという判断です。実際に、初期化生成された vue プロジェクトそのものがデフォルトで .git フォルダを内包していますので、別々に git 管理できます）

とりあえず今回はここまでです。

次は、amplify の機能を使用して vue プロジェクトをバックエンドとつなげてみます。
具体的には、こちらのチュートリアルが参考になります。

参考にさせてもらったサイト

コメント

タイトルとURLをコピーしました