最初に
RemixにはNetlifyでデプロイできるように設定できます。
手順は簡単でしたが、備忘録のため残しておきます。
今回はRemixをインストールして、開発できるところまでを残しておきます。
具体的なドキュメントは下記を参照しています。
使用技術
| ライブラリ | バージョン |
|---|---|
| Node | 20.12.2 |
| pnpm | 9.4.0 |
| React | 18.3.3 |
| Remix | 2.10.0 |
| Vite | 5.3.2 |
※私の好みでpnpmを使用しています。
Remixをインストール
下記コマンドで任意の場所でRemixをインストールを行います。
今回はnetlifyにデプロイするため、専用のコマンド担っています。
npx create-remix@latest --template netlify/remix-template
質問が出てきますが、ここではnetlifyはあまり関係がないため、
任意の回答で大丈夫です。
今回はpnpmを使用したかったので、npmを使用するかに関しては一応NOを選択しています。
インストール後は作成したプロジェクトに移動し、パッケージのインストールを行います。
pnpm install
これで準備は完了です。
Remixを動かす
ここまででセットアップできたので、開発フェーズに移りましょう。
ここではローカルにて開発環境の立ち上げまで行います。
pnpm dev
このコマンドでRemixの初期化及び、開発環境の立ち上げを行います。
初回のみ下記の質問が表示されます。
Run your Remix site with:
│ ● Netlify Functions (A Node-based runtime, running in one region)
│ ○ Netlify Edge Functions
この二つの違いは、netlifyをどのように動かすかのようです。
Netlify Edge Functionsを選択すれば、よりカスタマイズした環境でnetlifyを動かすことができるようですが、
今回は小規模であることと、発展した設定を行う予定はないので、
Netlify Functions (A Node-based runtime, running in one region)
こちらを選択しました。
そしたらREADME.mdの内容が変更されます。
具体的にはnetlifyを動かすための手順を記載してもらえています。
netlifyに関しては、また別の記事で執筆します。
その後下記コマンドを実行し、
ローカル環境で立ち上がれば終了です。
pnpm dev
最後に
次回はnetlifyへのデプロイ部分を紹介させて頂きます。
公式の方でデプロイ用のセッティングを行ってくれるのは非常に便利ですね！