Domain name secondary directory points to nextjs application

Application scenario: considering that multiple applications can improve the SEO of a domain name, we choose to point to nextjs applications in the form of domain name secondary directory. Here, we need to modify the nginx and nextjs configurations

Conditional assumption:

  1. www.helloworld.com/nextjs point to nextjs directory
  2. nextjs port 3000
  3. pm2 managing the production environment

Expected effect:

  1. Nextjs route jumps are all under www.helloworld.com/nextjs
  2. Image static image resources src are www.helloworld.com/nextjs lujinxia
  3. The node layer page can jump under www.helloworld.com/nextjs
  4. Distinguish the production environment from the dev environment. The nextjs directory is not configured in the dev environment

Use technology:

  1. nginx (map 3000)
  2. pm2 (pm2 management next production)
  3. Next JS (next.config.js configuration modification)

nginx modification

www.helloworld.com/nextjs needs to be redirected to the nextjs 3000 port and a series of resource requests such as js css image point to the 3000 port

Modify nginx.conf to point to next application

 server {
        listen       80;
        server_name   www.helloworld.com/nextjs ;
         location / {
            root   html;
            index  index.html index.htm;
        }
       location /nextjs/ {
            proxy_pass    http://127.0.0.1:3000/; #node.js port
            proxy_http_version 1.1;
            proxy_set_header Host $host;
        }
    }

pm2 configuration

Configuration environment distinguishes development environment from generation environment

  1. Global installation PM2: NPM install PM2 - G
  2. Create ecosystem.config.js in nextjs directory and configure
module.exports = {
  apps: [
    {
      name: "nextjs", //pm2 name
      script: "./server.js", //node start
      cwd: "./", // Current working path
      watch: [
        ".next", // Monitor the changed directory, once changed, restart automatically
      ],
      ignore_watch: [
        // Exclude from monitoring directory
        "node_modules",
        "logs",
        "static",
      ],
      instances: 1,
      node_args: "--harmony",
      env: {
        NODE_ENV: "development",
        PORT: 3006, //port
      },
      env_production: {
        NODE_ENV: "production",
        PORT: 3000, //port
        BASE_PATH: "nextjs",
      },
      out_file: "./logs/out.log", // Normal log path
      error_file: "./logs/err.log", // Error log path
      merge_logs: true,
      log_date_format: "YYYY-MM-DD HH:mm Z", // Format the date of the log
      autorestart: true,
      watch: false,
      max_memory_restart: "1G",
    },
  ],
};

3. Add NPM scripts to generate startup scripts and modify package.json

...
 "scripts" : {
     ....
	 "build": "next build",
     'production' : 'pm2 start ecosystem.config.js --env production'
     ....
 }
...

next modification

Modify next.config.js, next configuration file

  1. Encapsulate path, return different basePath to different environment
const isProd = process.env.NODE_ENV === "production";

function getBasePath() {
  var basePath = "";

  if (isProd && process.env.BASE_PATH) {
    if (process.env.BASE_PATH.startsWith("/")) {
      basePath = process.env.BASE_PATH;
    } else {
      basePath = "/" + process.env.BASE_PATH;
    }
  }

  return basePath;
}

  1. Change the next.config.js configuration
....
module.exports = {
 assetPrefix: getBasePath(), //Prefixed
 basePath: getBasePath(), //node 
 webpack(webpackConfig) {
    webpackConfig.output.publicPath =
      getBasePath() + webpackConfig.output.publicPath; //Resource generation prefix
    return webpackConfig;
  },
}
publicRuntimeConfig: {
    basePath: getBasePath(), //Write path
  },
....

3.image static path

import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();

// Image tag url is the road force of image
<img src =`${publicRuntimeConfig.basePath + url}` />

4.Link road strength treatment

import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();

//Link tag href jump 
 <Link href=`${publicRuntimeConfig.basePath }index`>
                    <a className="more">Jump</a>
 </Link>

Package + build

  1. next package: npm run build
  2. Production startup project: npm run production
  3. pm2 logs view: pm2 logs
  4. pm2 project supervision: pm2 list
  5. pm2 restart all

Tags: Nginx npm JSON Webpack

Posted on Tue, 05 May 2020 05:47:26 -0400 by OLG