VueプロジェクトをGitHub Pagesに一瞬で公開

はじめに

Vue CLI環境構築からGitHub Pagesに公開するまでをこの記事にまとめました。

Node.jsを使える環境が準備されていることを前提に進めます。

Vueをインストール

Vue CLIを使うことで、欲しい機能にあわせたスタート時の環境を作ることができます。
下記コマンドで、Vue環境準備のためのコマンドラインインタフェースをインストールします。

npm install -g @vue/cli

Vue CLI バージョン確認

% vue --version
@vue/cli 4.5.11

また、グローバルインストールを行うための環境パスが通っていない場合はエラーがでるので、この記事を参照ください。

npmのグローバルインストールをするためにパスを通す方法

Vueプロジェクト作成

vue create example

vue create の後にプロジェクト名を指定してください。

途中で出てくる選択肢は全部 enter で問題ないですが、カスタマイズしたい場合は最初の質問で Manually select features を選択してください。 画像のように vuex や vue-router の追加や、細かい設定が可能です

vue uiコマンドで、グラフィカルインターフェイスを使って、プロジェクトの作成・管理を行うことも可能です

vue ui

ローカルホスト立ち上げ

cd example
npm run serve

つくったプロジェクト配下に移動し、
npm run serve を実行すると、localhostが立ち上がります。http://localhost:8080/でこの画面を確認。

ここでブラウザに表示される画面は、src内のファイルが使用されています。

GitHubのリモートリポジトリに登録

まずはGitHubに新規リモートリポジトリを作成し、下記コマンドを実行し登録します。

% git init
% git remote add origin <リモートリポジトリのURL>
% git remote -v //確認
% git add .
% git commit -m 'initial commit'
% git push origin master

GitHub Pagesに公開

gh-pagesというツールを使って、gh-pagesブランチを公開する方法で進めていきます。

1. Vueの設定ファイルを作成

プロジェクトのルートディレクトリ直下に、以下の内容でvue.config.jsという名前で設定ファイルを作成します。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/weather-app/'   //任意
    : '/'
}

2. gh-pagesをインストール

--save-dev （ -D でもOK ）は開発用パッケージのインストールに必要なオプションです。

npm install gh-pages --save-dev

package.jsonの devDependencies というところに `` が追加されています。

 "devDependencies": {
    // 略
    "gh-pages": "^3.1.0",
  },

3. デプロイのためのコマンドを追加

package.jsonのscriptsに "deploy": "gh-pages -d dist" を追記します。下記のようになるはずです。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy": "gh-pages -d dist"   //追加
  },

4. deployコマンドで反映

npm run build により、srcのファイルを元に、dist配下に本番環境用のファイルを生成します。その後、npm run deploy を実行することで、リモートにgh-pagesブランチが作られ、distディレクトリの内部がGitHub Pagesに公開されます。

• npm run build
• npm run deploy

以上になります。今後、ソースコードを変更し反映させたい場合は、同様の手順で更新してください。

参考文献

• 【Vue CLI】 インストール
• 【Vue CLI】 publicPath