概要

SPA な Web アプリを継続的デリバリーする環境を作るシリーズ第二回、フロントエンド編。序章はこちら。

kkznch.hatenablog.com

全4部構成でお届けする。

ハンズオンするぞ

ひたすら手を動かそう。

Vue.js プロジェクトの作成と git の初期設定

フロントエンドで動作する Vue.js プロジェクトを作成する。作成時に対話形式で色々と聞かれるけど、全部デフォルト値でも大丈夫だと思う。

$ vue create app-frontend

Vue CLI v4.1.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

多分 vue create コマンドで作成したプロジェクトはデフォで git リポジトリとなってるので、今回は git init コマンドは不要なはず。なのでそのまま git remote add コマンドでハンズオンの前に自分で作成したリポジトリを git のリモートとして設定してあげよう。

$ git remote add origin git@gitlab.com:自分のユーザ名/app-frontend.git

なんとなくコミットしてプッシュまでしとく。

$ git add .
$ git commit -m "first commit"
$ git push -u origin master

環境毎に読み込む env ファイルの作成とビルドコマンドへオプションを追加

開発環境、本番環境ごとに読み込む env ファイルを作成する。 .env.local はローカル開発環境でビルドした際に読み込まれ、 .env.production は本番環境でビルドした際に読み込まれる。

.env.local

NODE_ENV=local
VUE_APP_API_BASE_URL=http://localhost

なお本番環境で指定する VUE_APP_API_BASE_URL は、このあと AWS でバックエンドの環境を構築する際に作られる EC2 の IP アドレス（ EIP ）を指定してあげる。なので今は空白にしておいてもいいよ。

.env.production

NODE_ENV=production
VUE_APP_API_BASE_URL=http://あとでEC2のIPアドレス入れるよ

env ファイルを作成しただけではビルド時の環境毎の切り替えができない（多分）ため、ビルドコマンドを実行する際にオプションを渡すよう package.json を修正する。

package.json

-   "serve": "vue-cli-service serve",
-   "build": "vue-cli-service build",
+   "serve": "vue-cli-service serve --mode local",
+   "build": "vue-cli-service build --mode production",

JS ライブラリ Axios のインストール

フロントから API を叩くために Axios という JS のライブラリをインストールする。

$ npm install axios

画面の作成

API を叩いて取得した値を表示する画面を作成する。 created() の中で axios.defaults.baseURL にバックエンドの URL を設定しているけど、本当は axios の interceptors という機能を使ってその中で設定してあげる方がよいかもしれない。

src/views/Hello.vue

<template>
  <div>
    <h1>ハローワールドですね</h1>
    <p>Body: {{ body }}</p>
    <p>Datetime: {{ datetime }}</p>
    <button @click="getHello">更新するよ</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'hello',
  data() {
    return {
      body: '',
      datetime: null,
    };
  },
  methods: {
    async getHello() {
      const response = await axios.get('/api');
      this.body = response.data.body;
      this.datetime = response.data.datetime;
    },
  },
  created() {
    axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL;
  },
  mounted() {
    this.getHello();
  },
};
</script>

動作の確認

ここまででフロントエンドの準備は9割方できた。この状態で以下のコマンドを実行し、Vue.js へアクセスするための node サーバを起動する。

$ npm run serve

...略

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

色々と表示された後で上記のようなメッセージが出力される。ここに書いてあるとおり http://localhost:8080 へアクセスすると Vue.js の画面が表示される。 node サーバ起動時に環境によっては 8080 ポートが既に使用されている場合があり、別のポート番号が割り振られている場合があるが、その場合は表示されたポート番号にアクセスすればよい。