Ngnix buildpack (#59)

* Update to newest NextJS v13.4.4

* Switch to static NextJS build, and Nginx web server

* Set Nginx PID file location

* Improve Nginx config for single-page app, NextJS

* Just deploy

* Switch to heroku-community/nginx buildpack identifier

.gitignore

@@ -1,3 +1,5 @@
+out/
+dist/
 node_modules/
 .next/
-*.log 
+*.log

Procfile

@@ -0,0 +1 @@
+web: bin/start-nginx-static

app.json

@@ -1,6 +1,6 @@
 {
  "name": "Next.js",
- "description": "Universal web app built on React.js, server-rendered with Node.js",
+ "description": "Universal web app built on React.js, static-served by Nginx",
  "scripts": {
  },
  "env": {
@@ -16,6 +16,10 @@
  "buildpacks": [
  {
  "url": "heroku/nodejs"
+ },
+ {
+ "url": "heroku-community/nginx"
  }
- ]
+ ],
+ "stack": "heroku-22"
 }

config/nginx.conf.erb

@@ -0,0 +1,84 @@
+daemon off;
+# stay attached to the dyno process, run in Procfile / web
+
+pid /app/nginx.pid;
+# /app is $HOME & working directory of Heroku dyno
+
+error_log stderr info;
+# As documented for Nginx, but we still see error during start-up in log:
+# > nginx: [alert] could not open error log file: open() "./logs/error.log"
+
+worker_processes <%= ENV['NGINX_WORKERS'] || 4 %>;
+# Heroku dynos have at least 4 cores.
+
+events {
+ use epoll;
+ accept_mutex on;
+ worker_connections <%= ENV['NGINX_WORKER_CONNECTIONS'] || 1024 %>;
+}
+
+http {
+ gzip on;
+ gzip_comp_level 2;
+ gzip_min_length 512;
+ gzip_proxied any; # Heroku router sends Via header
+
+ server_tokens off;
+
+ log_format heroku_www_app 
+ '$remote_addr - $http_x_request_id [$time_iso8601] '
+ '"$request" $status $body_bytes_sent '
+ '"$http_referer" "$http_user_agent"';
+ access_log /dev/stdout heroku_www_app;
+
+ include mime.types;
+ default_type application/octet-stream;
+ sendfile on;
+
+ client_body_timeout <%= ENV['NGINX_CLIENT_BODY_TIMEOUT'] || 5 %>;
+ # Must read the body in 5 seconds.
+
+ server {
+ listen <%= ENV["PORT"] %>;
+ server_name _;
+ keepalive_timeout 5;
+ client_max_body_size <%= ENV['NGINX_CLIENT_MAX_BODY_SIZE'] || 1 %>M;
+
+ ## HTTPS Only
+ if ($http_x_forwarded_proto != "https") {
+ return 301 https://$host$request_uri;
+ }
+
+ root <%= ENV["NGINX_ROOT"] || '/app/dist' %>;
+
+ location / {
+ ## Clean URLs: match on extensionless requests.
+ # try_files $uri $uri/ $uri.html =404;
+
+ ## Single-page app client-side routing: returns index.html if the requested path doesn't exist.
+ ## When enabled, the client-side app must handle its own 404 errors.
+ error_page 404 = /index.html;
+ }
+
+ ## Define specific behaviors for sub directories and other locations.
+ location /_next {
+ expires 7d;
+ }
+
+ ## Custom error pages
+ error_page 404 /404.html;
+ # error_page 500 /500.html;
+ }
+
+ ## Canonical Host: redirect to a canonical hostname.
+ ## Multiple server blocks may be used, one for each hostname to redirect from.
+ # server { 
+ # server_name some-other-name.example.com;
+ # return 301 https://canonical-name.example.com$request_uri;
+ # }
+ # server { 
+ # server_name yet-another-name.example.com;
+ # return 301 https://canonical-name.example.com$request_uri;
+ # }
+ # …
+}

next.config.js

@@ -0,0 +1,12 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+ output: 'export',
+ // Optional: Add a trailing slash to all paths `/about` -> `/about/`
+ // trailingSlash: true,
+ // Optional: Change the output directory `out` -> `dist`
+ distDir: 'dist',
+}
+
+module.exports = nextConfig