Github ActionsでVue.jsアプリをビルド、S3にデプロイする


## 注意！

この後インストールするVue CLIにはnode-ipcが含まれています。
問題のあるバージョンは現在取り除かれていますが、念の為Vue CLIインストールやアップグレードした際はバージョン確認することをおすすめします。

https://qiita.com/SnykSec/items/6e75bd78b4deb3371550

## Vueアプリを作成する

### node.jsのインストール

#### インストーラのダウンロード

公式からpkgファイルをDLします。

https://nodejs.org/ja/

#### インストール

DLしたpkgファイルをクリックし、インストーラーでNode.jsをインストールします。

| ![スクリーンショット 2022-03-15 13.15.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/82d2bfc6-180e-1b3f-7708-04777d02d67a.png) |
|:-:|

インストールしたらバージョン確認します。

```zsh
node --version
```

### Vue CLIのインストール

公式を参考にインストールします。

https://cli.vuejs.org/guide/installation.html

パッケージ名が`vue-cli`から`@vue/cli`に変更されたので、`vue-cli`(1.x or 2.x)をインストール済みの場合はアンインストールしてください。

```zsh
npm uninstall vue-cli -g
```

Vue CLIをインストールします。

```zsh
npm install -g @vue/cli
```

バージョンの確認。

```zsh
vue --version
```

念の為node-ipcのバージョンも確認。 `@vue/cli` 関連に9.2.2が含まれていなければオッケー。

```
npm ls node-ipc
```

### Vueアプリを作成する

下記コマンドで作成します。

```zsh
vue create [パッケージ名]
```

今回はデフォルトのVue3+babel+eslistの組み合わせを選択します。

```zsh
Vue CLI v5.0.1
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

~~~

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

 $ cd sample
 $ npm run serve
```

Vue.jsプロジェクト作成後のメッセージのとおり、sampleディレクトリに移動して、`npm run serve`を実行します。

```zsh
 DONE  Compiled successfully in 9284ms                                                                                   16:09:58

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.20:8080/

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

アプリケーションが起動できたら`http://localhost:8080/`にブラウザでアクセス。

| ![スクリーンショット 2022-03-15 16.12.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/346c33b6-9c88-376b-cea5-abae05d32cca.png)  |
|:-:|

Vue.js Appができたぞ〜！！

ちなみに`Manually select features`を選択した場合。

```zsh
Vue CLI v5.0.1
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
❯ Manually select features
```

こんな感じでマニュアル選択ができます。

```zsh
Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> t
o proceed)
 ◉ Babel
❯◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

~~~

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
```

## S3にバケットを作成＆ひとまず公開してみる

### Vue.jsプロジェクトをビルドする

今回Vue.jsアプリをS3にホストしますが、Vue.jsで作成されたコードはそのままブラウザでは実行できないため、実行可能なソースコードに変換（ビルド）します。

```zsh
npm run build
```

distディレクトリにビルドされたファイルができます。

```zsh
dist
├── css
│   └── app.2cf79ad6.css
├── favicon.ico
├── index.html
└── js
    ├── app.50a66ac0.js
    ├── app.50a66ac0.js.map
    ├── chunk-vendors.835690bc.js
    └── chunk-vendors.835690bc.js.map
```

### S3にバケットを作成 

AWSコンソールでS3バゲットを作成します。
作成したバゲットに先ほどビルドしたVue.jsアプリのdistディレクトリの下にあるファイルとフォルダすべてアップロードします。

#### 静的ウェブサイトホスティングを有効にする

プロパティで下記を設定します。

* 作成したオブジェクトのプロパティの「静的ウェブサイトホスティング」を「有効にする」を選択
* ホスティングタイプが選べるようになるので「静的ウェブサイトをホストする」を選択
* インデックスドキュメントに「index.html」を指定

#### アクセス許可のブロックパブリックアクセス(バケット設定)の設定

ブロックパブリックアクセス (バケット設定)の「パブリックアクセスをすべて ブロック」のチェックボックスをすべて外します。

#### アクセス許可のバゲットポリシーの編集

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::【S3バゲット名】/*"
        }
    ]
}
```

#### 公開されたURLを確認。

外部アクセスできるよう設定ができると、オブジェクトのプロパティ 静的ウェブサイトホスティングにバケットウェブサイトエンドポイントのURLが表示されます。

http://【S3バゲット名】.s3-website-us-east-1.amazonaws.com/ がブラウザで表示できたらS3の設定完了です！
このあたりでおやつのグミを食べてもいいでしょう。

| ![スクリーンショット 2022-03-16 16.48.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/2c53221c-df7d-1e17-875a-fe5c59b5d8e8.png) |
|:-:|

なお、S3の静的ウェブサイトホスティングはHTTPSに対応してないので、CloudFront経由でHTTPS接続出来るようにする等の対応が必要です。

## GitHub Actionsを設定

### リポジトリ作成、git pushする

GitHubにリポジトリ、git pushする

```zsh
git remote add origin git@github.com:【githubユーザー名】/【リポジトリ名】
git branch -M main # <= ブランチ名をmasterからmainに変更
git push -u origin main # mainブランチにpushする
```

### AWS IAMでS3デプロイ用のユーザーを作成する

AWSのIAMでS3デプロイ用のロールを作成、S3のポリシーをアタッチ。
アクセスキーID、シークレットアクセスキーを控える。

### Githubリポジトリにアクセス情報を設定する

Settings＞Secrets＞ActionsでActions secretsを追加。
S3デプロイ用ユーザーのアクセスキーID、シークレットアクセスキーをそれぞれ登録する。

| ![スクリーンショット 2022-03-17 23.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/2ac49293-b64f-295b-3295-009d92a95a85.png) |
|:-:|

ここでは、AWS_ACCESS_KEY_IDがアクセスキーID、AWS_SECRET_ACCESS_KEYがシークレットアクセスキー。

### GitHub Actionsにデプロイ手順を記載する

新しく.github/workflows/ディレクトリを作成、その下にdeploy.ymlを作成する。
（ファイル名は任意、何でもよい）

```.github/workflows/deploy.yml
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@main  # リポジトリをチェックアウト

      - name: Install Dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy  # S3にデプロイ
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: aws s3 cp --recursive --region ap-northeast-1 dist/ s3://【S3のオブジェクト名】
```

作成したymlファイルをGitHubリポジトリにpushします。

```zsh
git add .github/workflows/deploy.yml
git commit -m "add github action workflow"
git push
```

git pushするとGitHub Actionsのworkflowが実行されます。

| ![スクリーンショット 2022-03-23 7.20.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/61793b85-b4bf-2525-23d2-471d1cc205f5.png) |
|:-:|

workflowが実行中の黄色から緑に変わったら完了です。

| ![スクリーンショット 2022-03-23 7.26.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/7c7b3993-db7b-3698-633a-b6eee12ce4bc.png) |
|:-:|