サーバー処理をしない静的サイトを公開するのには GitHub Pages が便利です。
クライアントで動く JavaScript は使えるので Vue.js で作ったサイトも公開できます。
Vue.js のプロジェクトは vue-cli から作るのがいいようなので Mac で vue-cli のインストールから GitHub Pages にデプロイするまでの手順です。
vue-cli のインストール
sudo npm install -g npm sudo npm install -g @vue/cli npm --version # 6.9.0 vue --version # 3.5.1 |
※ sudo npm install -g vue-cli
でもインストールできるのですがバージョンが古く 2.9.6 でした。
プロジェクトの作成
vue create --default project-name |
project-name
ディレクトリが作成され git init
された状態になります。
GitHub に空の project-name
リポジトリを作成し push します。
cd project-name/ git remote add origin git@github.com:UserName/project-name.git git push -u origin master |
ビルド
GitHub Pages ではリポジトリの直下または docs
ディレクトリを公開できます。
デフォルトだとビルド成果は dist
ディレクトリに出力されるようになっているので vue.config.js
を作成して設定を変更します。
※ vue-cli 2 だと config/index.js
が予め存在していたのですがなくなっているので新規作成する。
また GitHub Pages の公開 URL に合わせて publicPath も変更します。
// vue.config.js module.exports = { publicPath: '/project-name/', outputDir: 'docs' } |
ビルドコマンドで /docs
を出力します。
npm run build |
デプロイ
ビルドされて出来た docs ディレクトリを GitHub に push するだけです。
既に出力ディレクトリを変更しているので動作には影響しませんが意味合い的に .gitignore の /dist
をコメントアウトまたは削除しておきます。
#/dist |
Git でデプロイ。
git add ./ git commit -m "message" git push |
GitHub Pages の設定
GitHub 上でリポジトリの設定から Options にある GitHub Pages を有効にします。
[master branch /docs folder]
を選択してください。
設定の項目に出てくる URL にアクセスできれば完成です。
※ CDN の反映に時間がかかるのかしばらくは 404 が表示されていました。
参考
Vue.js を vue-cli を使ってシンプルにはじめてみる
Vue CLI 3.0 で TypeScript な Vue.js プロジェクトをつくってみる
Vue CLI 3でsrcパスの変更方法