今までは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 ディレクトリに出力されるのですが、この設定を変更します。
リポジトリ名は自身のものに置き換えてください。
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 にアクセスして、アプリが正しく動くか確認してみてください！
スマホからも使える家計簿になるので、ぜひ使ってみてください！