# 作業ログ（vue.js編）
## install
- npm install vue
- vue --version
## プロジェクト作成
- vue create {project name}
- manually select featuresを選択
- VuexをSPACEキーで選択
- routerをSPACEキーで選択
## defaultページを表示する。
- npm run serve
- コンソールに出てくるリンクをCTRL+クリック
- CTRL+Cで停止
## vueプロジェクトをビルド
- npm run build

# 静的資産を配置するAWS-S3を準備する
- S3-Backetを作成する。
- 名前は任意
- リージョンはアジアパシフィック（東京）
- ブロックパブリックアクセスは全部あける（後で考える）
- S3-アクセス権限を変更する。（拠点のみアクセス可能）
- アクセス権限->ブロックパブリックアクセス
- パブリックアクセスをすべてブロック
- オフ
- 新しいアクセスコントロールリスト (ACL) を介して許可されたバケットとオブジェクトへのパブリックアクセスをブロックする
- オン
- 任意のアクセスコントロールリスト (ACL) を介して許可されたバケットとオブジェクトへのパブリックアクセスをブロックする
- オン
- 新規のパブリックバケットポリシーまたはアクセスポイントポリシーを介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする
- オン
- 任意のパブリックバケットポリシーまたはアクセスポイントポリシーを介したバケットとオブジェクトへのパブリックアクセスとクロスアカウントアクセスをブロックする
- オフ
- アクセス制限->バケットポリシー
- 以下を張る

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::britishbarrel-001/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": "---.---.---.---/--"
                }
            }
        }
    ]
}

- static website hostingを設定する。
- プロパティ->Static website hosting
- このバケットを使用してウェブサイトをホストする
- インデックスドキュメント
- index.html

## AWS-S3にvue.js資産を配備する。
- package.jsonにdeploy行を追加する。

{
  "name": "manage",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy": "bash deploy-s3.sh"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    (略)

- deploy-S3.shを用意する。

#!/bin/bash

# IAM-user-setup
aws configure set aws_access_key_id {アクセスキー} --profile XXXXX
aws configure set aws_secret_access_key {シークレットアクセスキー} --profile XXXXX
aws configure set region ap-northeast-1 --profile XXXXX

# remove old modules
aws s3 rm s3://{バケット名}/ --recursive --profile XXXXX

# upload new modules
aws s3 cp dist s3://{バケット名}/ --recursive --profile XXXXX

- npm run deploy

## ブラウザで見てみる。
- エンドポイントのURLをブラウザで表示する。