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

时间 2019-11-08

原文原文链接

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

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

用到的技术

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

Koa 2

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

nginx

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

react 16.3

一个javascript ui库node

next.js 6.0.1

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

ant design

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

react-motion

基于react的动画解决方案nginx

react-waypoint

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

一个带有负载均衡功能的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 | 博客