Vue.js製のポートフォリオサイトをNetlifyに引っ越しました

f:id:damdom:20171128211358p:plain:w200

一昨年10月に作ったサイトをレンタルサーバーから Netlify に引っ越しました。

becolomochi.booth.pm

なぜ引っ越したか

レンタルサーバーにいちいちファイル選んで手動でアップロードするのが手間でした……。Netlify なら GitHub にあるリポジトリと連携させて push 時にそのままビルドして公開できるというところに惹かれてのお引越しでした。



バージョン

vue-cli 2.8.2



リダイレクトファイルの修正

Apache なら .htaccess に書く内容は Netlify だと _redirects ファイルまたは netlify.toml ファイルに書くようです。

To configure redirects and rewrite rules for your Netlify site, add a _redirects file to the root of your published site. You can also add redirect rules to your netlify.toml file.

www.netlify.com

他の細かい設定はこのサイトでは行わないと判断し、_redirects ファイルで作成しました。そのファイルはプロジェクトディレクトリ直下に root ディレクトリを作って保存しました。
_redirects ファイルの内容は以下。

root/_redirects

# Redirect default Netlify subdomain to primary domain
https://xxxx.netlify.com/* https://独自ドメイン/:splat 301!

# SPA
/*    /index.html   200

2つ書きました。
・Netlify のデフォルトの URL から独自ドメインへのリダイレクト
・ヒストリーモードの SPA 用のリダイレクト

:splat のように頭にコロンがつくのが変数らしい。(詳しくは公式ドキュメントへ)

そして、_redirect ファイルの入っている root ディレクトリが ビルド時に dist ディレクトリにコピーされるよう設定を追加しました。

build/webpack.prod.conf.js

    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      },
      { // 追加
        from: path.resolve(__dirname, '../root'),
        to: config.build.assetsRoot,
        ignore: ['.*']
      }
    ])

stackoverflow を参考にしました。(ありがたや…

stackoverflow.com



Netlify の設定

独自ドメインの設定も HTTPS の設定も簡単だったのでびっくりしました。助かる。

ビルドの設定はこんな感じ。

f:id:damdom:20190108231948p:plain

・Repository は、Netlify に追加時に選んだリポジトリ
・Base directory は空
・Build command はビルドするときに使うコマンド(自分の場合は npm run build)
・Publish directory は公開するファイルが生成されるディレクトリ(dist)
・Deploy log visibility は一応 private にしてみている



今後の展望

jQuery と GAS を使用したお問い合わせフォームが実は不具合があるので Netlify の Form を使えないかと試してみています…