インストール方法

AWS環境へのインストール

用意するもの

AWS
- Route53
- S3
- Cognito
- EC2
- MongoDB

事前準備

サービス用のドメインをRoute53等で取得しておいてください

設置方法

はじめに ecomyu-api を設置します。次に ecomyu-webをビルドしてアップロードします

AWS S3の準備

AWSコンソールにログイン。サービス S3 に移動する

バケットを作成する
- バケット名を指定する → 例: ecomyu
- バゲットを作成
- 作成されたバケットをクリック
  - プロパティを見るARN

AWS Cognitoの準備

AWSコンソールにログイン。サービス Cognito に移動する

ユーザープールを作成する

サインインエクスペリエンスを設定
- Cognitoユーザープールを選択
- サインインオプションにEメールをチェックしておく
- 次へ
セキュリティ要件を設定
- パスワードポリシー
- 多要素認証
- ユーザーアカウントの復旧
- 次へ
サインアップエクスペリエンスを設定
- セルフサービスのサインアップ <- 招待制にしたい場合は無効にしておく
- 属性検証とユーザーアカウントの確認
- 必須の属性
- 次へ
メッセージ配信を設定
- Amazon SES / Cognito のどちらかを指定
- 次へ
アプリケーションを統合
- ユーザープール名 → 例: ecomyu
- ホストされた認証ページチェックしない
- 最初のアプリケーションクライアント
  - パブリッククライアント
    - アプリケーションクライアント名 → 例: ecomyu-webapp
    - クライアントシークレットを生成しない
- 高度なアプリケーションクライアントの設定
  - 以下の認証フローを指定しておく
    ALLOW_ADMIN_USER_PASSWORD_AUTH, ALLOW_CUSTOM_AUTH, ALLOW_REFRESH_TOKEN_AUTH, ALLOW_USER_PASSWORD_AUTH, ALLOW_USER_SRP_AUTH
- 確認および作成
  - ユーザープールを作成
ユーザープールを表示
- アプリケーションの統合タブのドメイン→アクション → Cognitoドメインの作成でCognitoドメインを作成し控えておく
- ユーザープールの概要にあるユーザープールのIDを控えておく
- アプリケーションクライアントのリストのクライアントIDを控えておく

AWS EC2 インスタンスの作成

インスタンスの起動

AWSコンソールにログイン。サービス EC2 に移動する

インスタンスを起動する
- 名前とタグ
  - 名前 例: ecomyu
- Application and OS images
  - OS images -> Amazon Linuxを選択 例: Amazon Linux 2023 AMI を選択
- インスタンスタイプ → 例: t2 micro
- キーペア（新しく作成 / 既存のキーペア）
- ネットワーク設定
- ストレージを設定 例: 8GiB gp3
- インスタンスを起動
Webサーバのインストール 例: Nginx

# apt-get install -y nginx
# vi /etc/nginx/sites-enabled/default
# systemctl status nginx
# systemctl restart nginx

例: /etc/nginx/conf.d/api

upstream api {
  server 127.0.0.1:3000;
}

server {
  listen 80;
  listen [::]:80;

  root /home/webmaster/webapp; # <- Webアプリ用ディレクトリ
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
  location /index.html {
    expires -1;
    add_header Cache-Control "no-cache, no-store, public, must-revalidate, proxy-revalidate";
    add_header X-Frame-Options "DENY" always;
  }

  location /api {
    client_max_body_size 10M;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;

    proxy_pass http://api;
    proxy_redirect off;
  }

MongoDBの準備
- インスタンスに接続（SSHクライアント / セッションマネージャー）
- MongoDBをインストールして起動する（以下参考）
  - https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-amazon/open in new window
  - https://www.mongodb.com/community/forums/t/openssl-error-when-starting-mongosh/243323/2open in new window
- データベースを作成しておく 例: ecomyu
```
$ mongosh
% use ecomyu
```

ユーザーを作成しておく 例: webmaster

# adduser webmaster
# su webmaster
$ cd ~
$ pwd
/home/webmaster

Node.jsのセットアップ
参考URL: https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.htmlopen in new window
パッケージマネージャ（npm / yarn / pnpm 等）をいれておく

ecomyu-api (APIサービス)open in new windowのインストール

GitHubからリポジトリをcloneする

$ git clone https://github.com/ecomyu/ecomyu-api

モジュールをインストール 例: pnpmの場合

$ pnpm i

.envを設置する 例: .env

PROTOCOL=http
DOMAIN=[サービス用のドメイン名]

DB_URI=mongodb://127.0.0.1:27017/ecomyu

PREFIX=/api

AWS_COGNITO_REGION=[Cognitoのリージョン]
AWS_COGNITO_ACCESS_KEY_ID=[Cognitoの認証権限をもつIAMユーザーのアクセスキーID]
AWS_COGNITO_SECRET_ACCESS_KEY=[Cognitoの認証権限をもつIAMユーザーのシークレットアクセスキー]
AWS_COGNITO_USERPOOL_ID=[CognitoのユーザープールID]
AWS_COGNITO_CLIENT_ID==[CognitoのクライアントID]
# AWS_COGNITO_CLIENT_SECRET=
AWS_COGNITO_ENDPOINT_DOMAIN==[Cognitoのエンドポイント]

AWS_S3_REGION=[S3のリージョン]
AWS_S3_ACCESS_KEY_ID=[S3のアクセス権限をもつIAMユーザーのアクセスキーID]
AWS_S3_SECRET_ACCESS_KEY=[S3のアクセス権限をもつIAMユーザーのシークレットアクセスキー]
AWS_S3_BUCKET_NAME=[S3のバケット名]

CLIENT_ORIGIN=[サービス用のURL]

起動確認

$ pnpm run dev
$ curl http://localhost:3000
{"root":true}

起動スクリプトの例

# vi /etc/systemd/system/ecomyu-api.service
# systemctl enable ecomyu-api
# systemctl start ecomyu-api

[Unit]
Description=node server
After=network-online.target

[Service]
Type=simple
Restart=always
WorkingDirectory=/home/webmaster/ecomyu-api
ExecStart=/bin/bash -c 'source ~/.bashrc; pnpm dev'
User=webmaster
Group=webmaster

[Install]
WantedBy=multi-user.target

ドメインの割り当て

ecomyu用にドメインを用意する 例: demo.ecomyu.com
EC2でALBを作成する
ALBのリスナーに作成したEC2インスタンス含んだTGを割り当てる
Route53でホストゾーンのレコードにALBを割り当てる

ecomyu-web (Webアプリ)open in new window の作成

ビルド環境の準備

ビルド用のPCにGitHubからリポジトリをcloneする

$ git clone https://github.com/ecomyu/ecomyu-web

モジュールをインストール 例: pnpmの場合

$ pnpm i

.envを設置する 例: .env.ppod

VUE_APP_COGNITO_POOL_ID=[CognitoのユーザープールID]
VUE_APP_COGNITO_CLIENT_ID=[CognitoのクライアントID]

VUE_APP_SIGNUP=true

VUE_APP_APP_URL=https://[サービス用のドメイン名]/
VUE_APP_API_URL=https://[サービス用のドメイン名]/api/

招待制にしたい場合は VUE_APP_SIGNUP は true 以外を指定しておく

以下のページを提供するサービスにあわせて書き換える pages/PageAbout.vue <- サービス概要 pages/PagePrivacy.vue <- プライバシーポリシー pages/PageTerms.vue <- 利用規約

ビルド

$ pnpm run build

アップロード

AWS EC2 インスタンスのWebアプリ用ディレクトリにアップロードする

# インストール方法

# AWS環境へのインストール

# 用意するもの

# 事前準備

# 設置方法

# AWS S3の準備

# AWS Cognitoの準備

# ユーザープールを作成 する

# AWS EC2 インスタンスの作成

# インスタンスの起動

# ecomyu-api (APIサービス)open in new windowのインストール

# ドメインの割り当て

# ecomyu-web (Webアプリ)open in new window の作成

# ビルド環境の準備