GitHub PagesにDocker+Vue.js+Vuetifyでページを公開

この記事について

VSCodeのRemoteを使って、Dockerコンテナー内に、Vue.js+Vuetify環境を構築するためのメモです。

対象

• VSCodeはある程度使い慣れている
• VSCodeのRemote container拡張機能は使った事がある

dockerfile作成

EXPOSE 8080でポート指定をする事を忘れないように。
最悪コピペでもOK

dockerfile

FROM node:lts

WORKDIR /app

RUN npm install -g npm && \
    npm install -g @vue/cli

EXPOSE 8080

CMD ["/bin/sh"]

dockerビルド

VSCode Remote Containerを使用して、ビルドを行う。

Vue-Cliインストール

shell

$ npm install -g @vue/cli

Vueプロジェクト作成

カレントディレクトリにvueプロジェクトを作成する

コマンドを叩いた後に、途中で選択肢が出るので、yes> default>Use NPMを選択

shell

$ vue create .
> Y
> default (babel, eslint)
> Use NPM

VSCode RemoteでPORT設定

Forewd Port from Containerを選択し、8080を入力

Vueの動作確認

shell

$ npm run serve

コマンドを叩いた後に、localhostにアクセス
http://localhost:8080/studio

動作確認できたら、ctrl+cで一旦終了。

Vuetify インストール

コマンドを叩いた後に、選択肢があるのでDefault (recommended)を選択

shell

$ vue add vuetify

> Default (recommended)

ビルドディレクトリ変更

/node_modules/@vue/cli-service/lib/options.js

options.js

<省略>

exports.defaults = () => ({
  // project deployment base
  publicPath: '',
  // for compatibility concern. TODO: remove in v4.
  baseUrl: '',

  // where to output built files
  //  outputDir: 'dist',
  outputDir: 'docs',

  assetsPublicPath: '',

  // where to put static assets (js/css/img/font/...)
  assetsDir: '',

  // filename for index.html (relative to outputDir)
  indexPath: 'index.html',

ビルド

docsディレクトリにビルドされたファイルが格納されるので、そのままGitHub Pagesにデプロイできます。

shell

$ npm run build

Vue routerを入れる

shell

$ vue add router