使用next.js完成从开发到部署

公良同

2023-12-01

next.js 是一个非常棒的轻量级的react同构框架，使用它可以快速的开发出基于服务端渲染的react应用。在next.js 官网推荐的是使用now来部署应用，但是对于国内用户或者说是有特殊需求的用户来说，部署到自定义服务器也许是大多数人希望的。借着近期公司官网改版，顺便分享下自己从开发到部署过程中所经历的点点滴滴。

依稀还记得第一次使用next.js 是在去年（2017年），那个时候使用的是next.js 2.x版本，react还是15版本，一年过去，现在react已经发展到16版本，而next.js 已经发展到6.0版本了，迭代速度瞠目结舌，在使用新版本的过程中也是遇到不少的坑。

用到的技术

先说下这次用到了哪些技术，下面列举了项目中主要用到的技术或工具库。

Koa 2

由express原班人马开发的下一代web框架，用来提供web服务。

nginx

是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器（摘自百度百科），由俄罗斯人开发。用来提供静态文件服务、https证书、代理服务。

react 16.3

一个javascript ui库

next.js 6.0.1

一个轻量级的react同构应用框架

ant design

由蚂蚁金服开发的基于react的一套中后台产品组件库

react-motion

基于react的动画解决方案

react-waypoint

判断组件是否在当前可视区的react 组件

一个带有负载均衡功能的Node应用的进程管理器

isomorphic-fetch

同构WHATWG Fetch API

开发阶段

讲了这么多，让我们进入开发阶段，第一步构建项目架构，这里分享下自己的项目结构：

? .vscode

vscode 配置文件

? component

react组件

? common

公共部分，我放置的是导航栏信息、全局变量和全局样式等等

? pages

项目所有页面入口，也是next.js 各页面入口文件

? static

静态文件

? styles

各页面样式表

? index.js

node启动文件

? .babelrc

babel配置文件

? .gitignore

git 配置文件

? ecosystem.config.js

pm2配置文件

? next.config.js

next.js 配置文件

? postcss.config.js

postcss 配置文件

? nginx.conf

nginx配置文件

? package.json

npm配置文件

在完成了项目结构配置之后，假设你已经在package.json中保存了我们所需要的所有依赖，让我们尝试着输入yarn来安装依赖。这里假设安装一切顺利，下面继续我们的开发之旅。

首先，在pages文件下新建一个index.js，这里就随便从我真实项目中抽取部分代码来作师范。

export default class HomePage extends React.Component {
  static async getInitialProps({ req, pathname }) {
    const data = await fetch(`${ctx}/api/projects/common/list`).then(res => res.json())
    .then(dt => dt)
    .catch(err => {
      return {
        success: false,
        message: err.message
      }
    })
    return { pathname,data };
  }

  render() {
    const { pathname, data } = this.props;
    return (
      <div>
         <Head>
          <title>首页-易科捷（武汉）生态科技有限公司</title>
        </Head>
        <div>Welcome to next.js!</div>
    	{/*这里省略代码*/}
      </div>
    );
  }
}

复制代码

如果你的package.json中没有配置next启动脚本，请访问setup进行配置，下面我们在控制台运行npm run dev，如果一切顺利，打开浏览器，你将会看到Welcome to next.js!

在next.js中开发体验和react几乎没有什么区别，但是在webpack配置这块可能需要下点功夫。一些常用的插件像sass、css等， next.js都已经给你提供了，你也可以使用社区开源的插件来完成你的开发之旅。详情请查看next.js官网。

部署

在经历了开发阶段、测试等等一系列流程，现在终于等到了部署阶段。在next.js中生产阶段打包只需要运行npm run build即可，官方推荐不修改打包的文件夹名字（原名称为.next），这里个人推荐修改成build或者dist这些名称。在打包完成之后，需要编写nodejs启动入口文件，下面贴出实例代码：

const Koa = require('koa')
const next = require('next')
const Router = require('koa-router')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare()
  .then(() => {
    const server = new Koa()
    const router = new Router()
	// 首页
    router.get('/', async ctx => {
      await app.render(ctx.req, ctx.res, '/', ctx.query)
      ctx.respond = false
    })
	// 关于
    router.get('/about', async ctx => {
      await app.render(ctx.req, ctx.res, '/about', ctx.query)
      ctx.respond = false
    })
	// 产品
    router.get('/products/:id', async ctx => {
      const {id} = ctx.params
      await app.render(ctx.req, ctx.res, `/products/${id}`, ctx.query)
      ctx.respond = false
    })
	// 案例
    router.get('/case', async ctx => {
      await app.render(ctx.req, ctx.res, '/case', ctx.query)
      ctx.respond = false
    })
	// 联系我们
    router.get('/contact', async ctx => {
      await app.render(ctx.req, ctx.res, '/contact', ctx.query)
      ctx.respond = false
    })
	// 详情
    router.get('/view/:type/:id', async ctx => {
      const {id, type} = ctx.params
      await app.render(ctx.req, ctx.res, `/view`, {id, type})
      ctx.respond = false
    })
    // 如果没有配置nginx做静态文件服务，下面代码请务必开启
   /* router.get('*', async ctx => {
      await handle(ctx.req, ctx.res)
      ctx.respond = false
    })*/
    // 防止出现控制台报404错误
    server.use(async (ctx, next) => {
      ctx.res.statusCode = 200
      await next()
    })
    server.use(router.routes())
    server.listen(port, () => {
      console.log(`> Ready on http://localhost:${port}`)
    })
  })

复制代码

一般的静态文件、gzip压缩无需交给nodejs来做，个人一直认为专业的事交给专业的人。这里将该项任务转移给nginx，特别注意上面实例代码中我注释的部分代码，若果你没有使用nginx来做静态文件服务，请务必开启，否则像next.js打包出来的js、css、图片文件等，都将报404。

在next.js生产打包阶段打包出来的js文件请求路径中带有版本号，而真实打包出来的文件夹却没有实际对应的目录，也就是打包出来的是虚拟目录，这里如果使用nginx就需要特别注意。好在next.js提供配置项来修改build id，以下是我的真实代码：

// next.config.js
module.exports = {
  generateBuildId: async () => {
    // For example get the latest git commit hash here
    return 'v1'
  }
}
复制代码

这样打包出来的虚拟路径大概是_next/v1/page/xxx.js，如果你使用cdn前缀，这里有一点区别，但是版本号依然存在。

还有一个坑就是next.js打包出来的有三个文件夹：bundles、dist、static，对于不知道源码的人来说，根本不知道实际请求文件在哪一个文件夹。于是我就看next.js源码，发现其实找的是bundle文件下的page，源码位置：L214

所以在配置nginx就需要使用别名。下面给出一段我的nginx真实配置代码：

		# 网站根目录文件
        location ~ ^/(robots.txt|humans.txt|favicon.ico|sw.js|baidu_verify_7Kj6tQjI3v.html) {
            root /home/website/eco_website_pc/static/;
            if ($request_filename ~* sw.js){
                    expires -1s;
                }
            expires 10m;

	    }
        # static下的文件
        location ^~ /static/ {
            alias /home/website/eco_website_pc/static/;
            if ($request_filename ~* sw.js){
                    expires -1s;
                }
            expires 10m;

	    }
        # next pages页面下的脚本
        location ~ ^/(/_next/v1/) {
            alias /home/website/eco_website_pc/build/bundles/;
            if ($request_filename ~* sw.js){
                    expires -1s;
                }
            expires 10m;

	    }
        # next static下的静态文件
        location ~ ^/(/_next/static/) {
            root /home/website/eco_website_pc/build;
            if ($request_filename ~* sw.js){
                    expires -1s;
                }
            expires 10m;

	    }
复制代码

静态文件配置好了就需要配置https证书了，因为我们这次项目是公司官网，证书我就自己去免费弄了一个，这里我使用的freessl上面提供的亚洲诚信的证书。在申请完ssl证书之后需要去域名提供商那里去配置TXT记录，我这里使用的是阿里云，在完成验证后，freessl将会下载证书，拿到该证书之后需要去配置nginx ssl证书，下面贴出我的完整配置：

server {
        listen       80;
        listen       443 ssl;
        server_name  wh-eco.com;
        charset utf-8;
        ssl_certificate /home/website/ssl/www/full_chain.pem;
        ssl_certificate_key /home/website/ssl/www/private.key;
        fastcgi_param   HTTPS               on;
        fastcgi_param   HTTP_SCHEME         https;

        if ($scheme = http ) {
          return 301 https://$host$request_uri;
        }
        access_log      /var/log/nginx/www.wh-eco.com.access.log;
        error_log       /var/log/nginx/www.wh-eco.com.error.log;
        location / {
            proxy_pass http://127.0.0.1:xxxx; #保密 0.0
            proxy_set_header Host $host;
            #proxy_redirect off;
            proxy_set_header    REMOTE-HOST $remote_addr;
        	# 网站可能后期会使用websocket 特次升级请求协议
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	        proxy_connect_timeout 60;
            proxy_read_timeout 600;
            proxy_send_timeout 600;
        }
        # 网站根目录文件
        location ~ ^/(robots.txt|humans.txt|favicon.ico|sw.js|baidu_verify_7Kj6tQjI3v.html) {
            root /home/website/eco_website_pc/static/;
            if ($request_filename ~* sw.js){
                    expires -1s;
                }
            expires 10m;

	    }
        # static下的文件
        location ^~ /static/ {
            alias /home/website/eco_website_pc/static/;
            if ($request_filename ~* sw.js){
                    expires -1s;
                }
            expires 10m;

	    }
        # next pages页面下的脚本
        location ~ ^/(/_next/v1/) {
            alias /home/website/eco_website_pc/build/bundles/;
            if ($request_filename ~* sw.js){
                    expires -1s;
                }
            expires 10m;

	    }
        # next static下的静态文件
        location ~ ^/(/_next/static/) {
            root /home/website/eco_website_pc/build;
            if ($request_filename ~* sw.js){
                    expires -1s;
                }
            expires 10m;

	    }
        error_page   500 502 503 504 = /error.html;
        error_page  404 = /notfound.html;
        location = /error.html {
                root   /home;
            }
        location = /notfound.html{
            root  /home;
        }
    }
复制代码

至于gzip你可以根据你要求来做配置，贴一个我的示例配置：

 	gzip  on;
    gzip_comp_level 6;
    gzip_vary on;
    gzip_types
        application/atom+xml
        application/javascript
        application/json
        application/rss+xml
        application/vnd.ms-fontobject
        application/x-font-ttf
        application/x-web-app-manifest+json
        application/xhtml+xml
        application/xml
        font/opentype
        image/svg+xml
        image/x-icon
        image/jpeg 
        image/gif 
        image/png
        text/css
        text/plain
        text/x-component;
复制代码

在完成nginx配置之后需要做的是以pm2方式启动整个应用

pm2 start ecosystem.config.js
复制代码

在运行完上述命令后，如果一切顺利，你就可以输入域名来访问你的应用了（假设你已经完成了域名解析工作）。

总结

一入前端深似海

Github | 博客

使用next.js完成从开发到部署

用到的技术

开发阶段

部署

总结

相关阅读

相关文章

相关问答

相关文档