nawamemo

Nuxt.jsのローカル環境構築とNetlifyへの初回デプロイでやったこと

..

環境構築

https://zenn.dev/szn/articles/nuxt-2-with-docker-compose
こちらの記事を見ながら構築しましたが、digital envelope routines::unsupportedというwebpack由来らしいエラーが発生し、コンテナのビルドに失敗。
configに設定を差し込んでどうにかしようとするもうまくいかず、これ以上は今の自分の努力ではどうにもならんわと感じたため、雑にnodeのバージョンを現時点で最新の17系から16系へ下げてビルドし直す形で対処しました。

#修正
FROM node:16-alpine 

RUN apk update && \
    yarn global add create-nuxt-app

ENV HOST 0.0.0.0
EXPOSE 3001

言語はJavaScript、テストはJest、UIはVuetify、モードはユニバーサルに設定。今回はSSGで静的ファイル生成を行いたいので、デプロイターゲットはStaticです。

「なんか見様見真似で構築してしまったけど、どんな設定かようわからんわ」という場合は、とりあえずnuxt.config.jsにtarget:'static',の一行があればNetlifyへのデプロイはできます。

yarn devでこんな画面が出たのでとりあえず構築完了です。

スクリーンショット 2022-03-13 20.24.51.png

いったんデプロイしてみる

この状態で一度デプロイしてみます。
本番環境には、ホスティングプラットフォームのNetlifyを使います。
https://netlify.com/
https://docs.netlify.com/configure-builds/common-configurations/nuxt/
Githubのmainブランチへプッシュがあると、自動的に再ビルド・デプロイしてくれるすんばらしいサービスです。
初回デプロイは正直案内手順どおりにやる、以外に書くことがないので、公開ディレクトリの設定だけ少しメモしておきます。

Base directory: src
Build command: nuxt generate
Publish directory: src/dist/

Nuxtアプリケーションだけプッシュしているのであればdistを公開ディレクトリに設定するだけでいいのですが、今回はDockerでローカル環境を構築しているので、Nuxtのソース自体はmainブランチのsrcディレクトリ以下に配置されています。なのでsrcをベースに、それ以下に生成されるdistを公開ディレクトリに指定する必要があります。

初期ページがなかなか表示できずに詰まりかけたのですが、src/dist/と、末尾にスラッシュを付ける必要があっただけでした。

スクリーンショット 2022-03-13 21.11.12.png

無事に同じページが表示され、.netlify.appドメインにてデプロイが完了しました。

環境変数の設定

今回はQiita APIから自分の書いた記事を取得してくるサイトを作ろうと思っているので、取得したアクセストークンを環境ごとに管理します。

src以下に.envを追加し、環境を表すNODE_ENV='development'とAPIアクセストークンを格納するAPI_SECRET=アクセスキーなどの変数を格納。デフォルトで.gitignoreに入っているのでプッシュされません。

あとはnuxt.config.jsにて設定を記述します。

export default {

  privateRuntimeConfig: {
    apiURL: process.env.API_URL,
    apiSecret: process.env.API_SECRET
  },
  publicRuntimeConfig: {
    apiURL: process.env.NODE_ENV !== 'production' ? process.env.API_URL : '',
    apiSecret: process.env.NODE_ENV !== 'production' ? process.env.API_SECRET : ''
  },
・
・
}

これら2つの便利なプロパティのおかげで、特に.envをrequireすることなどもなく、安全に環境変数をフロントエンドから隠蔽できるようになったみたいです。うれしい。

本番環境の環境変数も、.envに対応する形で定義します。

スクリーンショット 2022-03-15 14.57.10.png

こういうのもパッと見でわかりやすくていいですね。

もし本番環境とステージング環境を分ける場合は、Netlifyでもう一度サイトを作り直して、デプロイ対象ブランチをmainではなく開発ブランチに設定すれば実現可能です。有料プランに入ればBasic認証もかけられますし、microCMSのプレビュー用エンドポイントとかそういう感じのやつと組み合わせれば、JAMstacでも十分な制作体制を無料で整えられますね。すばらしい……WordPressとレンタルサーバーなんていらんかったんや……

よっしゃ、あとはゴリゴリ実装するだけ💪

参考リンク：
https://zenn.dev/szn/articles/nuxt-2-with-docker-compose
https://qiita.com/cnloni/items/1c83cac956599fb24158
https://cly7796.net/blog/javascript/create-a-jamstack-site-with-nuxt-js-and-microcms/