やりたいこと
仕事用に自由に使えるサーバとドメインの確保目的で契約している
さくらのレンタルサーバ（スタンダードプラン）に、
自作したReactやNextJSのWebアプリをデプロイしたい。
大まかな流れ
- NextJSでWebアプリ作成
- npm run build で公開用のファイルを生成
- さくらサーバへ転送
- 公開
NextJS でWebアプリを作成
まぁ普通に作成、React-Three-Fiber でアイコンをグリングリン回すようなものでヨシ！
ファイルパスの相対パス化のために package.json に以下の項目を追加
package.json
{
"name": "hogehoge",
"version": "0.1.0",
"private": true,
+ "homepage": "./",
"scripts": {
npm run build
Reactでは npm run build で ./build 以下にファイルが生成されるのですが、
NextJSでは next export という処理も必要だそうです。
また出力先も./out になります。
というわけで、package.json のスクリプトに以下のものを追加しました。
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
+ "export": "next export",
"start": "next start",
},
そして、npm run build からの npm run export で、
デプロイ用のファイル群が生成されます。
とここまで書いて、気がついたのですが、スクリプト１つで良いですね。
package.json
"scripts": {
"dev": "next dev",
- "build": "next build",
+ "build": "next build && next export",
"start": "next start",
},
これで、npm run build 一発で生成されました。
さくらサーバへ転送
./out 以下をzipで圧縮して転送しても良いですが、scp -r でそのまま送ります。
bash-3.2$ scp -r ./out user_name@sakuraServer:~
:
公開
さくらサーバにログインして、先ほどホームディレクトリに転送した./out を、
~/www/ 以下の適当なところにmvで移動します。
bash-3.2# ssh user_name@sakuraServer
user_name@sakuraServer's password:
Last login: Mon Mar 13 10:23:12 2023 from ****
FreeBSD 13.0-RELEASE-p12 (GENERIC) #0: Tue Sep 12 19:33:31 UTC 2023
Welcome to FreeBSD!
やっぱいいですね、FreeBSD、がんばれ BSD! Linuxなんかに負けるな！！
あ、ついつい心の声がっ！
最後に
作業自体は、大した作業ではないし、ネット上ですぐに見つかる情報ですが、
どうせまた絶対に忘れるので、自分のところに備忘録的に記しました。
古い人間なので、AWS Amplify とか Firebase みたいなサーバレスより
自分でログインして普通に使えるサーバが安心できちゃいます。
オールドタイプです。