KUSANAGIはプライム・ストラテジー株式会社が開発している超高速LAMP, LEMP, WordPress環境です。 バーチャルドメインマネージャーとしても有用です。

KUSANAGI に nextjs アプリをデプロイする

● next.config.ts の設定を変更して standalone でデプロイするようにする

next.config.ts

const nextConfig: NextConfig = {
  // デプロイ先を 変更する場合は設定します
  distDir: '.next__deploy',

  // standaloneモードにする
  output:'standalone',
};

● nginxの設定を変更する( root ユーザー )

nginxの設定ファイルディレクトリへ移動します

cd /etc/opt/kusanagi/nginx/conf.d

ファイル <ホスト名>.lamp.inc に設定を追加します。

vi <ホスト名>.lamp.inc 

http://localhost:3098 に接続する場合の設定

### for Next.js ↓
location @nextserver {
    proxy_pass http://localhost:3098;
    proxy_http_version 1.1;
    
    # WebSocket対応
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_cache_bypass $http_upgrade;
    
    # ホスト情報
    proxy_set_header Host $host;
    
    # クライアント情報
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    # プロトコル情報
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # タイムアウト設定(オプション)
    proxy_connect_timeout 60s;
    proxy_send_timeout 60s;
    proxy_read_timeout 60s;
}

# 1 . favicon専用の設定  
location ~ ^/favicon\.ico {  
    proxy_pass http://localhost:3099;  
    proxy_http_version 1.1;  
    proxy_set_header Host $host;  
}  
  
# 2 . SVGアイコン用の設定  
location ~ ^/icon\.svg {  
    proxy_pass http://localhost:3099;  
    proxy_http_version 1.1;  
    proxy_set_header Host $host;  
}  
  
# 3 . Apple Touch Icon用の設定  
location ~ ^/apple-icon\.png {  
    proxy_pass http://localhost:3099;  
    proxy_http_version 1.1;  
    proxy_set_header Host $host;  
}

# Let's Encrypt ACME Challenge用
location ^~ /.well-known/acme-challenge/ {
    root /var/www/html;  # または /usr/share/nginx/html
    try_files $uri =404;
    allow all;
}

# Next.jsの_nextファイル(ビルド済み静的ファイル含む)
location ^~ /_next {
    try_files $uri @nextserver;
    expires 365d;
    add_header Cache-Control 'public';
}

# publicディレクトリの静的ファイル(画像、フォント、その他のアセット)
location ~* ^/(.*\.(png|jpg|jpeg|gif|ico|svg|webp|woff|woff2|ttf|eot|pdf|zip|css|js))$ {
    # publicディレクトリから直接配信を試行
    try_files /public/$1 $uri @nextserver;
    expires 1y;
    add_header Cache-Control 'public, immutable';
}

location / {
    try_files $uri $uri.html /index.html @nextserver;
}

### for Next.js ↑

nginxのリスタート

nginx -t
nginx -s reload

CloudFlareでDNSを設定している場合は、必ずキャッシュをパージしましょう。

Cloudflareのダッシュボードで以下を実行してください:

Caching → Configuration → Purge Everything
No.2637
11/28 14:06

edit