Chapter 06

おまけ:デプロイしてみる

matsu7089
matsu7089
2021.01.01に更新

今まではPC内で開発サーバーを立てて家計簿アプリの動作確認をしていましたが、Web上にサイトを公開して、いつでも確認できるようにしたいですよね!

デプロイする方法はたくさんあるのですが、今回は GitHub Pages でサイトを公開する方法を紹介します。

GitHubでリポジトリの作成

https://github.com/new にアクセスして、「Repository name」に好きな名前を入力します。
最終的には https://ユーザーID.github.io/リポジトリ名 でアクセスできるようになります。

「Public」が選択され、下のチェックボックスはすべて空のまま「Create repository」ボタンをクリック。

リポジトリにpushする

プロジェクトのディレクトリに移動して、現状のコードを一度コミットします。

> git add .
> git commit -m "家計簿完成"

さきほど作成したリポジトリとローカルのリポジトリを紐付けてから、push します。
ユーザーIDとリポジトリ名は自分のものに置き換えてください。

> git remote add origin https://github.com/ユーザーID/リポジトリ名.git
> git branch -M master
> git push -u origin master

ユーザーIDとパスワードを聞かれるので、入力します。

Username for 'https://github.com':
Password for 'https://xxxxx@github.com':

このような表示がでたらOKです

remote: Resolving deltas: 100% (8/8), done.
To https://github.com/ユーザーID/リポジトリ名.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

フロントをビルドする

今までは yarn serve コマンドのみを使ってきましたが、yarn build で公開用に最適化されたファイルを出力できます。
build コマンドを実行すると、デフォルトでは build ディレクトリに出力されるのですが、この設定を変更します。

リポジトリ名は自身のものに置き換えてください。

vue.config.js
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  publicPath: isProd ? '/リポジトリ名' : '/',
  outputDir: 'docs',
  filenameHashing: false,
  productionSourceMap: false
}

開発時は http://localhost:8080/ で作業をしましたが、サイト公開時は https://ユーザーID.github.io/リポジトリ名 になるので publicPath の値を変える必要があります。
yarn build 時は process.env.NODE_ENV の値が 'production' になるので、これを使って場合分けをしています。

また、GitHub Pages では root か docs ディレクトリのみ公開できるので、outputDir を docs に変更しています。

設定ファイルを書き終えたので、コミットしておきます。

> git add vue.config.js
> git commit -m "production用の設定を追加"

では、いよいよビルドしてみます。

> yarn build

「DONE Build complete」という表示が出たらOKです!

 DONE  Build complete. The docs directory is ready to be deployed.

docs ディレクトリの中身をすべて追加して GitHub に push します。

> git add docs/
> git commit -m "docsを追加"
> git push origin master

GitHub Pages で公開する

GitHub で作成したリポジトリの Settings タブをクリックします

GitHub Pages 欄をみつけて Branch を master、ディレクトリを /docs に設定して「save」ボタンをクリックします。

「Your site is published at xxx」という表示がされたらデプロイ完了です!!

表示された URL にアクセスして、アプリが正しく動くか確認してみてください!
スマホからも使える家計簿になるので、ぜひ使ってみてください!