首页 > 其他分享> 文章详细

域名二级目录指向 nextjs 应用

2020-09-21 16:03:55 阅读：296 来源： 互联网

标签：指向 pm2 next 域名 production nextjs js com

应用场景: 考虑到多应用在一个域名下能提高该域名的seo,所以选择通过域名二级目录形式指向 nextjs应用,这里需要修改 nginx 和 nextjs 配置

条件假设:

www.helloworld.com/nextjs 指向 nextjs 目录

nextjs 端口 3000

pm2 管理production 环境

预期效果:

nextjs 路由跳转都在 www.helloworld.com/nextjs 下跳转

image 静态图片资源 src 都为 www.helloworld.com/nextjs 路劲下

node 层页面指向都能在 www.helloworld.com/nextjs 下跳转

区分开 production 环境和 dev 环境,dev 环境下不配置nextjs 目录

使用技术:

nginx (映射3000)

pm2 (pm2 管理 next production)

nextjs (next.config.js 配置修改)

nginx 修改

www.helloworld.com/nextjs 需要重定向到 nextjs 3000端口并且一系列js css image等资源请求都指向 3000 端口

修改nginx.conf 指向next 应用

 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 配置

配置环境区分开发环境和生成环境

全局安装 pm2 : npm install pm2 -G

nextjs 目录下创建 ecosyste.config.js并配置

module.exports = {
  apps: [
    {
      name: "nextjs", //pm2 name
      script: "./server.js", //node 启动 (node start )
      cwd: "./", // 当前工作路径
      watch: [
        ".next", // 监控变化的目录，一旦变化，自动重启
      ],
      ignore_watch: [
        // 从监控目录中排除
        "node_modules",
        "logs",
        "static",
      ],
      instances: 1,
      node_args: "--harmony",
      env: {
        NODE_ENV: "development",
        PORT: 3006, //端口
      },
      env_production: {
        NODE_ENV: "production",
        PORT: 3000, //端口
        BASE_PATH: "nextjs",
      },
      out_file: "./logs/out.log", // 普通日志路径
      error_file: "./logs/err.log", // 错误日志路径
      merge_logs: true,
      log_date_format: "YYYY-MM-DD HH:mm Z", // 设置日志的日期格式
      autorestart: true,
      watch: false,
      max_memory_restart: "1G",
    },
  ],
};

3.添加 npm scripts 生成启动脚本, 修改package.json

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

next 修改

修改next.config.js , next 配置文件

封装路径,达到不同环境返回不同basePath

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;
}

更改next.config.js配置

....
module.exports = {
 assetPrefix: getBasePath(), //加前缀
 basePath: getBasePath(), //node 
 webpack(webpackConfig) {
    webpackConfig.output.publicPath =
      getBasePath() + webpackConfig.output.publicPath; //资源生成前缀
    return webpackConfig;
  },
}
publicRuntimeConfig: {
    basePath: getBasePath(), //写入路径
  },
....

3.image 静态路径

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

// image 标签 url 为image 的路劲
<img src =`${publicRuntimeConfig.basePath + url}` />

4.Link 路劲处理

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

//Link 标签 href 跳转 
 <Link href=`${publicRuntimeConfig.basePath }index`>
                    <a className="more">跳转</a>
 </Link>

打包+生成

next 打包 : npm run build

production 启动项目: npm run production

pm2 日志查看 : pm2 logs

pm2 项目监看 : pm2 list

pm2 重启: pm2 reload all

豌豆资源搜索网站https://55wd.com 电脑刺绣绣花厂 ttp://www.szhdn.com

标签：指向,pm2,next,域名,production,nextjs,js,com
来源： https://www.cnblogs.com/Qooo/p/13706078.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

域名二级目录 指向 nextjs 应用