Vue.js製のポートフォリオサイトをNetlifyに引っ越しました
一昨年10月に作ったサイトをレンタルサーバーから Netlify に引っ越しました。
なぜ引っ越したか
レンタルサーバーにいちいちファイル選んで手動でアップロードするのが手間でした……。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.
他の細かい設定はこのサイトでは行わないと判断し、_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 を参考にしました。(ありがたや…
Netlify の設定
独自ドメインの設定も HTTPS の設定も簡単だったのでびっくりしました。助かる。
ビルドの設定はこんな感じ。
・Repository は、Netlify に追加時に選んだリポジトリ
・Base directory は空
・Build command はビルドするときに使うコマンド(自分の場合は npm run build)
・Publish directory は公開するファイルが生成されるディレクトリ(dist)
・Deploy log visibility は一応 private にしてみている
今後の展望
jQuery と GAS を使用したお問い合わせフォームが実は不具合があるので Netlify の Form を使えないかと試してみています…