
レンタルサーバー(ubuntu) で next.js をSSRで動かす
next.js linux nginx
レンタルサーバーでnext.jsをSSGで公開する場合は npm run build をしてoutディレクトリの中身をそのままデプロイすれば表示されますが、SSRの場合はnodeをインストールする必要があります。
1.Node.jsとnpmのインストール
ubuntuの場合apt install nodeを実行すると、バージョンがかなり古いものがインストールされてしまいます。
この場合nvmを使用して高バージョンのものをインストールしていきます。
・nvmのインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
・nodeのインストール(npmも一緒に)
# 最新版をインストールする場合
nvm install node --latest-npm
# バージョンを指定する場合(バージョン18.19.0)
nvm install v18.19.0 --latest-npm
・利用するバージョンを選択
nvm use v18.19.0
2.プロジェクトの作成
npx create-next-app my-next-project
3.ウェブサーバーの設定(nginx)
設定ファイルに挙動を記載する。
# nginx.conf 等のホストの設定箇所
server {
listen 80;
server_name your_domain.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
・設定を反映
nginx -s reload
4.next.js の起動
2で作成したプロジェクトディレクトリに移動してnext.jsを起動する。
# プロジェクトディレクトリに移動
cd /path/to/my-next-project
# next.js 起動
npm run dev
※参考 nvmコマンド一覧
・helpを表示
nvm --help
・バージョンを表示
nvm --version
・現在使用のバージョンを表示
nvm current
・インストール可能なバージョンを表示
nvm ls-remote
・インストールされているバージョンを表示
nvm ls
・バージョンを指定してインストール
nvm install [version名]
・バージョンを指定してインストールし、npmもインストール
nvm install [version名] --latest-npm
・バージョンを指定してアンインストール
nvm uninstall [version名]
・使用するバージョンを選択
nvm use [version名]