RealWorldその２（フロントエンド）「Vue admin template」を動かしてみる

# はじめに

- 前回の記事( https://qiita.com/ssugimoto/items/5bf561debe87843eb32c ) で紹介した 「Vue admin template （Vue2 + TypeScript + element-ui + vue-router ・・・）」をローカル環境で動かしてみます。
- ローカルの開発環境に、Node等をインストールするのは手間なのでコンテナ（リモートコンテナ）を使います。

- 動かすフレームワーク・ライブラリのバージョンの一部

```
"vue": "^2.6.12",
"vue-router": "^3.5.1",
"element-ui": "^2.15.1",
```

## 前提
- Windowsであれば WSL2 が使える環境であること
- VSCodeがインストールされており使ったことがあること
- Docker Desktop（もしくは代替のPodman / Mnikube / lima）でコンテナが動かせること

## リモートコンテナを使えるようにする
- git cloneしても良いですが、独自のカスタマイズをする場合はzipダウンロードが良いです
- リモートコンテナは、 Git リポジトリ https://github.com/ssugimoto/aws-amplify-typescript-local-container にあるものを
使います。
そのGit リポジトリはAWS Amplify を動かすことができるものをベースにしているため、不要なものがインストールされます。不要なものはDockerfileとdevcontainer.jsonから削ってください（Java, aws cli, amplify cli を削ると軽量化できます）。


1. GitHub → Code → Download ZIP → 「aws-amplify-typescript-local-container-main.zip」を任意のディレクトリに置き、展開する
2. README.mdの説明を確認
    - VSCode で（plugin 「Remote - ContainersPreview」 と 「Remote - WSLPreview」をインストールする）
3. VSCode → ファイル → フォルダを開く 、ローカルを表示し、「aws-amplify-typescript-local-container-main.zip」を展開したディレクトリを開く
4. 信頼性を確認が表示されたら「はい」を選び
5. VSCoddの右下あたりに「ReOpen in container」のボタンを押す
6. コンテナのビルドがされます、約５分あればコンテナが使えます
7. VSCode内でコンテナが使えるようになる

## コンテナ内からVueのソースを取得
- Git clone または ZIPダウンロードで取得します 

### Git cloneの場合

1. コンテナ内のターミナルで
    
    ```
    cd /workspaces/
    mkdir vue
    ```
2. GithubにSSH接続できるようにssh key等の設定
    - https://monsat.hatenablog.com/entry/generating-ssh-keys-for-github 等を参考にしてください
    - コンテナ内の `/root/.ssh/` に ssh接続設定します
3. Git クローンする
    
    ```
    git clone git@github.com:Armour/vue-typescript-admin-template.git
    ```
### ZIPダウンロードの場合
4. コンテナ内のターミナルで
    
    ```
    cd /workspaces/
    mkdir vue
    cd /workspaces/vue
    ```
5. wgetでzipファイルを取得

    ```
    wget https://github.com/Armour/vue-typescript-admin-template/archive/refs/heads/master.zip
    ```
    master.zip がダウンロードできる
    
    ```
    unzip master.zip
    ```
    vue-typescript-admin-template-master に展開される

## vueのプロジェクトがVSCodeリモートコンテナ内に配置されたのでアプリを動くようにする

### 実行するコマンド
- https://github.com/Armour/vue-typescript-admin-template#readme の通り

```sh
cd /workspaces/vue/vue-typescript-admin-template
yarn install
yarn run serve
```

ここまでのコマンドで、リモートコンテナ内で ブラウザアクセス用のWebサーバ相当、
ブラウザからAPIリクエストを受けるモックサーバ相当が起動します。

- yarn installする前のディレクトリの場合の例
 
```
root ➜ /workspaces/vue/vue-typescript-admin-template (master ✗) $ ls -l
total 1544
-rw-r--r--    1 root root    468 Nov 30 11:45 babel.config.js
drwxr-xr-x    2 root root   4096 Nov 30 11:45 demo
-rw-r--r--    1 root root     88 Nov 30 11:45 jest.config.js
-rw-r--r--    1 root root   1066 Nov 30 11:45 LICENSE
drwxr-xr-x    3 root root   4096 Nov 30 11:45 mock
-rw-r--r--    1 root root   4095 Nov 30 11:45 package.json
-rw-r--r--    1 root root     59 Nov 30 11:45 postcss.config.js
drwxr-xr-x    4 root root   4096 Nov 30 11:45 public
-rw-r--r--    1 root root   8454 Nov 30 11:45 README.md
-rw-r--r--    1 root root   8485 Nov 30 11:45 README-zh.md
drwxr-xr-x   16 root root   4096 Nov 30 11:45 src
drwxr-xr-x    3 root root   4096 Nov 30 11:45 tests
-rw-r--r--    1 root root    711 Nov 30 11:45 tsconfig.json
-rw-r--r--    1 root root   4120 Nov 30 11:45 vue.config.js
-rw-r--r--    1 root root 559790 Nov 30 11:45 yarn.lock
```

- yarn run serve 実行時の例

```
root ➜ /workspaces/vue/vue-typescript-admin-template (master ✗) $ yarn run serve
yarn run v1.22.15
$ concurrently "npm:mock" "vue-cli-service serve"
[mock] npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1638442498826-0.7553495223286655/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
[mock] 
[mock] > vue-typescript-admin-template@1.0.0 mock /workspaces/vue/vue-typescript-admin-template
[mock] > cd mock && ts-node-dev mock-server.ts
[mock] 
[1] Browserslist: caniuse-lite is outdated. Please run:
[1] npx browserslist@latest --update-db
[1] 
[1] Why you should do it regularly:
[1] https://github.com/browserslist/browserslist#browsers-data-updating
[1]  INFO  Starting development server...
[mock] [INFO] 10:54:59 ts-node-dev ver. 1.1.6 (using ts-node ver. 9.1.1, typescript ver. 4.2.3)
[1] Starting type checking service...
[1] Using 1 worker with 2048MB memory limit
[mock] {
[mock]   info: {
[mock]     name: 'Mock API',
[mock]     description: 'Mock API for vue-typescript-admin-template.',
[mock]     version: '1.0.0'
[mock]   },
[mock]   paths: {
[mock]     get: [
[mock]       '/mock-api/v1/articles',
[mock]       '/mock-api/v1/articles/:id',
[mock]       '/mock-api/v1/pageviews',
[mock]       '/mock-api/v1/transactions',
[mock]       '/mock-api/v1/roles',
[mock]       '/mock-api/v1/routes',
[mock]       '/mock-api/v1/users',
[mock]       '/mock-api/v1/users/:username'
[mock]     ],
[mock]     post: [
[mock]       '/mock-api/v1/articles',
[mock]       '/mock-api/v1/roles',
[mock]       '/mock-api/v1/users/register',
[mock]       '/mock-api/v1/users/login',
[mock]       '/mock-api/v1/users/logout',
[mock]       '/mock-api/v1/users/info'
[mock]     ],
[mock]     put: [
[mock]       '/mock-api/v1/articles/:id',
[mock]       '/mock-api/v1/roles/:id',
[mock]       '/mock-api/v1/users/:username'
[mock]     ],
[mock]     delete: [
[mock]       '/mock-api/v1/articles/:id',
[mock]       '/mock-api/v1/roles/:id',
[mock]       '/mock-api/v1/users/:username'
[mock]     ]
[mock]   }
[mock] }
[mock] Mock server started on port 9528!
```

- `yarn run serve`で起動できると、自動でアクティブのブラウザのタブで http://localhost:9527/#/login?redirect=%2Fdashboard が開く

- ログイン画面が表示される
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/a823b1b8-d6ef-85a7-5f40-d281556542f6.png" width="600" />


- ログインボタン押すと、 ダッシュボード画面が表示されます
http://localhost:9527/#/dashboard
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/0f5b7f5c-eac1-0157-1346-ca997bea58e5.png" width="600" />

- 左のサイドメニューのリンクを押していくとモックAPIサーバ にリクエストされ画面が切り替わります
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/cf9f8c4b-331b-a67d-1669-eb1cb62df5b1.png" width="600" />

- 動いているポート番号
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/9badc28a-9720-a2d6-f1b3-085fd7b694e1.png" width="600" />

以上で動かしてみる作業は完了です。
他の画面等もさわり、SPAとVue（＋ライブラリ）でできることを体感して見ましょう。


## 設定を見ておきましょう（時間があれば）

- ファイル `/workspaces/vue/vue-typescript-admin-template/vue.config.js` が起点となるようなファイルです

- `process.env.XXX` は環境用の設定です、nodeの場合によく使われれます。

### yarn run serveで動く説明

`npm run` | `yarn run` では、 `package.json`の"scripts" に書かれているコマンドが実行されます。

```package.json
  "scripts": {
    "serve": "concurrently \"npm:mock\" \"vue-cli-service serve\"",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6",
    "mock": "cd mock && ts-node-dev mock-server.ts"
  },
```

- `yarn run serve` |`npm run serve` の場合は、「"concurrently \"npm:mock\" \"vue-cli-service serve\""」が動くので `vue-cli-service serve` が動くことになります。

- `npm:mock` では、`"mock": "cd mock && ts-node-dev mock-server.ts"` が動きます
    - `/workspaces/vue/vue-typescript-admin-template/mock/mock-server.ts` が実行されるので、port 9528 でモックAPIサーバが動きます
    - `concurrently` は複数コマンドを実行できるようにするためのおまじない。https://shigekitakeguchi.com/2016/08/10/1.html の説明を見るとわかりやすいです。

## ドキュメント
https://armour.github.io/vue-typescript-admin-docs/ に少しだけドキュメントがありますので参考に