React服务端渲染+pm2自动化部署

15315912157248fdea6bb73.jpeg

本文是直接着手SSR部分的并通过实战讲述自己遇到的一些问题和方案,需要大家有一定的React,node和webpack基础能力。skr,skr。

服务端渲染

Server Slide Rendering服务端渲染,又简写为SSR,他一般被用在我们的SPA(Single-Page Application),即单页应用。

为什么要用SSR?

首先我们需要知道SSR对于SPA的好处优势是什么。

  • 更好的SEO(Search Engine Optimization)SEO是搜索引擎优化,简而言之就是针对百度这些搜索引擎,可以让他们搜索到我们的应用。这里可能会有误区,就是我也可以在index.html上写SEO,为什么会不起作用。因为React、Vue的原理是客户端渲染,通过浏览器去加载js、css,有一个时间上的延迟,而搜索引擎不会管你的延迟,他就觉得你如果没加载出来就是没有的,所以是搜不到的。
  • 解决一开始的白屏渲染,上面讲了React的渲染原理,而SSR服务端渲染是通过服务端请求数据,因为服务端内网的请求快,性能好所以会更快的加载所有的文件,最后把下载渲染后的页面返回给客户端。

上面提到了服务端渲染和客户端渲染,那么它们的区别是什么呢?

客户端渲染路线:

  1. 请求一个html
  2. 服务端返回一个html
  3. 浏览器下载html里面的js/css文件
  4. 等待js文件下载完成
  5. 等待js加载并初始化完成
  6. js代码终于可以运行,由js代码向后端请求数据( ajax/fetch )
  7. 等待后端数据返回
  8. react-dom( 客户端 )从无到完整地,把数据渲染为响应页面

服务端渲染路线:

  1. 请求一个html
  2. 服务端请求数据( 内网请求快 )
  3. 服务器初始渲染(服务端性能好,较快)
  4. 服务端返回已经有正确内容的页面
  5. 客户端请求js/css文件
  6. 等待js文件下载完成
  7. 等待js加载并初始化完成
  8. react-dom( 客户端 )把剩下一部分渲染完成( 内容小,渲染快 )

其主要区别就在于,客户端从无到有的渲染,服务端是先在服务端渲染一部分,在再客户端渲染一小部分

我们怎么去做服务端渲染?

我们这里是用express框架,node做中间层进行服务端渲染。通过将首页进行同构处理,让服务端,通过调用ReactDOMServer.renderToNodeStream方法把Virtual DOM转换成HTML字符串返回给客户端,从而达到服务端渲染的目的。

这里项目起步是已经做完前端和后端,是把已经写好的React Demo直接拿来用

服务端渲染开始

既然是首页SSR,首先我们要把首页对应的index.js抽离出来放入我们服务端对应的server.js,那么index.js中组件对应的静态css和js文件我们需要打包出来。

用webpack打包文件到build文件夹

我们来运行npm run build

我们可以看到两个重要的文件夹,一个是js文件夹,一个是css文件夹,他就是我们项目的js和css静态资源文件

将打包后的build文件能在服务端server.js中访问到

因为是服务端,我们需要用到express

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import express from 'express'
import reducers from '../src/reducer';
import userRouter from './routes/user'
import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'
import model from './model'
import path from 'path'
import https from 'http'
import socketIo from 'socket.io'
const Chat = model.getModel('chat')
//新建app
const app = express()
//work with express
const server = https.Server(app)
const io = socketIo(server)
io.on('connection',function(socket){
socket.on('sendmsg',function(data){
let {from,to,msg} = data
let chatid = [from,to].sort().join('_')
Chat.create({chatid,from,to,content:msg},function(e,d){
io.emit('recvmsg',Object.assign({},d._doc))
})
// console.log(data)
// //广播给全局
// io.emit('recvmsg',data)
})
})
app.use(cookieParser())
app.use(bodyParser.json())
app.use('/user',userRouter)
app.use(function(req,res,next){
if(req.url.startsWith('/user/') || req.url.startsWith('/static/')){
return next()
}
//如果访问url根路径是user或者static就返回打包后的主页面
return res.sendFile(path.resolve('build/index.html'))
})
//映射build文件路径,项目上要使用
app.use('/',express.static(path.resolve('build')))
server.listen(8088, function () {
console.log('开启成功')
})
  • 主要看上面的app.use('/',express.static(path.resolve('build')))res.sendFile(path.resolve('build/index.html'))这两段代码。
  • 他们把打包后的主页放入服务端代码中返回给客户端。
  • 因为上面我用了import代码,所以我们在开发环境中需要用到babel-cli里的babel-node来编译。
  • 安装npm --registry https://registry.npm.taobao.org i babel-cli -S`,大家如果觉得这样切换源麻烦,可以下个nrm,360度无死角切换各种源,好用!
  • 我们需要修改package.json的启动服务器的npm scripts"server": "NODE_ENV=test nodemon --exec babel-node server/server.js"
  • cross-env跨平台设置node环境变量的插件。
  • nodemon和supervisor一样是watch服务端文件,只要一改变就会重新运行,相当于热重载。nodemon更轻量
  • 最后我们来跑一下npm run server,就能看到服务端跑起来了。

ReactDOMServer.renderToString/ReactDOMServer.renderToNodeStream

  • 这里我们先讲一下在浏览器中React.createElement把React的类进行实例化,实例化后的组件可以进行mount,最后通过React.render渲染到我们的客户端浏览器界面。
  • 而在服务器中我们可以通过 renderToString或者renderToNodeStream方法把React实例化的组件,直接渲染生成html标签。那么这俩个有什么区别呢?
  • renderToNodeStream是React 16最新发布的东西,它支持直接渲染到节点流。渲染到流可以减少你的内容的第一个字节(TTFB)的时间,在文档的下一部分生成之前,将文档的开头至结尾发送到浏览器。 当内容从服务器流式传输时,浏览器将开始解析HTML文档。速度是renderToString的三倍,所以我们在这里使用renderToNodeStream
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import express from 'express'
import React from 'react'
import {renderToStaticMarkup,renderToNodeStream} from 'react-dom/server'
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import {StaticRouter} from 'react-router-dom'
import {
createStore,
applyMiddleware,
//组合函数用的
compose
} from 'redux';
import App from '../src/App'
import reducers from '../src/reducer';
import userRouter from './routes/user'
import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'
import model from './model'
import path from 'path'
import https from 'http'
import socketIo from 'socket.io'
const Chat = model.getModel('chat')
//新建app
const app = express()
//work with express
const server = https.Server(app)
const io = socketIo(server)
io.on('connection',function(socket){
socket.on('sendmsg',function(data){
let {from,to,msg} = data
let chatid = [from,to].sort().join('_')
Chat.create({chatid,from,to,content:msg},function(e,d){
io.emit('recvmsg',Object.assign({},d._doc))
})
// console.log(data)
// //广播给全局
// io.emit('recvmsg',data)
})
})
app.use(cookieParser())
app.use(bodyParser.json())
app.use('/user',userRouter)
app.use(function(req,res,next){
if(req.url.startsWith('/user/') || req.url.startsWith('/static/')){
return next()
}
const store = createStore(reducers,compose(
applyMiddleware(thunk)
))
//这个 context 对象包含了渲染的结果
let context = {}
const root = (<Provider store={store}>
<StaticRouter
location={req.url}
context={context}
>
<App></App>
</StaticRouter>
</Provider>)
const markupStream = renderToNodeStream(root)
markupStream.pipe(res,{end:false})
markupStream.on('end',()=>{
res.end()
})
})
//映射build文件路径,项目上要使用
app.use('/',express.static(path.resolve('build')))
server.listen(8088, function () {
console.log('开启成功')
})

此时将服务端renderToNodeStream后的代码返回给前端,但是这个时候还是不行,我们执行一下npm run server,可以看到报错了。

css-modules-require-hook/asset-require-hook

css-modules-require-hook

  • 因为服务端此时不认识我们的css文件,我们需要安装一个包,来让服务端处理css文件。
  • npm i css-modules-require-hook -S安装在生产环境下。
  • 在项目根目录创建一个crmh.conf.js钩子文件进行配置,看下图。

写入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// css-modules-require-hook
module.exports = {
generateScopedName: '[name]__[local]___[hash:base64:5]',
//下面的代码在本项目中暂时用不到,但是以下配置在我另一个项目中有用到,我来讲一下他的配置
//扩展名
//extensions: ['.scss','.css'],
//钩子,这里主要做一些预处理的scss或者less文件
//preprocessCss: (data, filename) =>
// require('node-sass').renderSync({
// data,
// file: filename
// }).css,
//是否导出css类名,主要用于CSSModule
//camelCase: true,
};
  • 修改我们的server.js文件,添加import csshook from 'css-modules-require-hook/preset',注意⚠️一定要把这行代码放在导入App模块之前
1
2
3
import csshook from 'css-modules-require-hook/preset'
//我们的首页入口
import App from '../src/App'

此时在运行server.js,会发现又报了个错。

asset-require-hook

  • 这个错误是因为服务端没有处理前端代码需要的图片
  • 需要安装npm i asset-require-hook -S,这个插件用来让服务端处理图片,注意⚠️前提是客户端代码,引用图片都需要require
  • server.js写入代码
1
2
3
4
5
6
7
//解决图片问题,客户端代码引用图片都需要require
import assethook from 'asset-require-hook'
assethook({
extensions:['png'],
//图片大小下于10000的图片会直接base64编码
limit: 10000
})

运行之后发现又报错了,这个很简单,因为我们只有image的引用名字,却没有地址

  • 所以此时要在外面加个壳,把之前build之后的静态js、css文件引入进去,添加html、head这些标签。来看完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import 'babel-polyfill'
import express from 'express'
import React from 'react'
import {renderToString,renderToStaticMarkup,renderToNodeStream} from 'react-dom/server'
//引入css文件和js文件
import staticPath from '../build/asset-manifest.json'
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import {StaticRouter} from 'react-router-dom'
import {
createStore,
applyMiddleware,
//组合函数用的
compose
} from 'redux';
//解决服务端渲染的图片问题 必须放在App之前
import csshook from 'css-modules-require-hook/preset'
//解决图片问题,需要require
import assethook from 'asset-require-hook'
assethook({
extensions:['png'],
limit: 10000
})
import App from '../src/App'
import reducers from '../src/reducer';
import userRouter from './routes/user'
import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'
import model from './model'
import path from 'path'
import https from 'http'
import socketIo from 'socket.io'
const Chat = model.getModel('chat')
//新建app
const app = express()
//work with express
const server = https.Server(app)
const io = socketIo(server)
io.on('connection',function(socket){
socket.on('sendmsg',function(data){
let {from,to,msg} = data
let chatid = [from,to].sort().join('_')
Chat.create({chatid,from,to,content:msg},function(e,d){
io.emit('recvmsg',Object.assign({},d._doc))
})
// console.log(data)
// //广播给全局
// io.emit('recvmsg',data)
})
})
app.use(cookieParser())
app.use(bodyParser.json())
app.use('/user',userRouter)
app.use(function(req,res,next){
if(req.url.startsWith('/user/') || req.url.startsWith('/static/')){
return next()
}
const store = createStore(reducers,compose(
applyMiddleware(thunk)
))
const obj = {
'/msg':'聊天消息列表',
'/me':'个人中心列表'
}
//这个 context 对象包含了渲染的结果
let context = {}
res.write(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<meta name="description" content="${obj[req.url]}"/>
<meta name="keywords" content="SSR">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="stylesheet" href="/${staticPath['main.css']}">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">`)
const root = (<Provider store={store}>
<StaticRouter
location={req.url}
context={context}
>
<App></App>
</StaticRouter>
</Provider>)
const markupStream = renderToNodeStream(root)
markupStream.pipe(res,{end:false})
markupStream.on('end',()=>{
res.write(`</div>
<script src="/${staticPath['main.js']}"></script>
</body>
</html>`)
res.end()
})
})
//映射build文件路径,项目上要使用
app.use('/',express.static(path.resolve('build')))
server.listen(8088, function () {
console.log('开启成功')
})
  • 这个时候我们可以在html标签里加上SEO的meta<meta name="keywords" content="SSR">
  • 最后还要把客户端的index.js文件中的渲染机制改成hydrate,不用render,他们之间的区别可以看这个(传送门☞render !== hydrate
1
2
3
4
5
6
7
8
ReactDOM.hydrate(
(<Provider store={store}>
<BrowserRouter>
<App></App>
</BrowserRouter>
</Provider>),
document.getElementById('root')
)

到此为止我们开发模式下的SSR搭建完毕,接下来生产模式的坑我来讲一下。

生产环境SSR准备

我们上面所讲的只是开发模式下的SSR,因为我们是通过babel-node编译jsx和es6代码的,只要一脱离babel-node就会全错,所以我们需要webpack打包服务端代码

我们需要创建一个webserver.config.js,用来打包server的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
const path = require('path'),
fs = require('fs'),
webpack = require('webpack'),
autoprefixer = require('autoprefixer'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin')
cssFilename = 'static/css/[name].[contenthash:8].css';
CleanWebpackPlugin = require('clean-webpack-plugin');
nodeExternals = require('webpack-node-externals');
serverConfig = {
context: path.resolve(__dirname, '..'),
entry: {server: './server/server'},
output: {
libraryTarget: 'commonjs2',
path: path.resolve(__dirname, '../build/server'),
filename: 'static/js/[name].js',
chunkFilename: 'static/js/chunk.[name].js'
},
// target: 'node' 指明构建出的代码是要运行在node环境里.
// 不把 Node.js 内置的模块打包进输出文件中,例如 fs net 模块等
target: 'node',
//指定在node环境中是否要这些模块
node: {
__filename: true,
__dirname: true,
// module:true
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?cacheDirectory=true',
options: {
presets: ['es2015', 'react-app', 'stage-0'],
plugins: ['add-module-exports',
[
"import",
{
"libraryName": "antd-mobile",
"style": "css"
}
],"transform-decorators-legacy"]
},
},{
test: /\.css$/,
exclude: /node_modules|antd-mobile\.css/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
modules: false,
localIdentName:"[name]-[local]-[hash:base64:8]",
// sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
)
),
},
{
test: /\.css$/,
include: /node_modules|antd-mobile\.css/,
use: ExtractTextPlugin.extract({
fallback: require.resolve('style-loader'),
use: [{
loader: require.resolve('css-loader'),
options: {
modules:false
},
}]
})
}, {
test: /\.(jpg|png|gif|webp)$/,
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
}, {
test: /\.json$/,
loader: 'json-loader',
}]
},
// 不把 node_modules 目录下的第三方模块打包进输出文件中,
externals: [nodeExternals()],
resolve: {extensions: ['*', '.js', '.json', '.scss']},
plugins: [
new CleanWebpackPlugin(['../build/server']),
new webpack.optimize.OccurrenceOrderPlugin(),
//把第三方库从js文件中分离出来
new webpack.optimize.CommonsChunkPlugin({
//抽离相应chunk的共同node_module
minChunks(module) {
return /node_modules/.test(module.context);
},
//从要抽离的chunk中的子chunk抽离相同的模块
children: true,
//是否异步抽离公共模块,参数boolean||string
async: false,
}),
new webpack.optimize.CommonsChunkPlugin({
children:true,
//若参数是string即为抽离出来后的文件名
async: 'shine',
//最小打包的文件模块数,即要抽离的公共模块中的公共数,比如三个chunk只有1个用到就不算公共的
//若为Infinity,则会把webpack runtime的代码放入其中(webpack 不再自动抽离公共模块)
minChunks:2
}),
//压缩
new webpack.optimize.UglifyJsPlugin(),
//分离css文件
new ExtractTextPlugin({
filename: cssFilename,
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
}
module.exports = serverConfig

重点⚠️

  • 指定target,打包出来的代码运行在哪里
  • 指定externals不要把node_modules包打包,因为此项目运行在服务端,直接用外面的node_modules就行。不然打包后会很大。
  • loader中用babel对js的处理

ok,现在来我们改一下package.json的npm scripts,添加一个packServer,顺便改一下build的scripts

1
2
3
4
5
6
7
8
9
10
"scripts": {
"clean": "rm -rf build/",
"dev": "node scripts/start.js",
"start": "cross-env NODE_ENV=development npm run server & npm run dev",
"build": "npm run clean && node scripts/build.js && npm run packServer",
"test": "nodemon scripts/test.js --env=jsdom",
"server": "cross-env NODE_ENV=test nodemon --exec babel-node server/server.js",
"gulp": "cross-env NODE_ENV=production gulp",
"packServer": "cross-env NODE_ENV=production webpack --config ./config/webserver.config.js"
},
  • packServer指定了生产环境,这在之后会用到。
  • build是先clean掉build文件夹,在去打包客户端的代码,打包完之后再去打包服务端的代码

那么到这里为止我们差不多可以自己试试了

  • npm run build,会生成打包后的build文件夹,里面包含了我们的服务端和客户端代码
  • 找到打包后的node文件运行它,在build/server/static/js目录下,可直接node文件启动。这就解决了我们生产环境下的问题。

pm2,服务器自动部署

现在我们要把我们的项目部署到服务器上,并用pm2守护进程。

  • 首先我们得有一台云服务器,这里我是在阿里云买的一台ubuntu 14.04
  • 需要一个已经备案后的域名,域名也可以在阿里云买。当然也可以不用,可以直接服务器地址访问。
  • ok让我们开始吧。

服务器部署

  • 在部署到服务器之前我们代码中还有些东西需要修改,修改mongod的连接地址.
1
2
3
const env = process.env.NODE_ENV || 'development'
//当生产环境时,需要改变mongodb的连接端口,根据你服务器的mongodb端口来,我这里是19999
const BASE_URL = env == 'development'?"mongodb://localhost:27017/chat":"mongodb://127.0.0.1:19999/chat";
  • 修改客户端socket.io的链接地址const socket = io('ws://host:port'),改成你自己的服务器地址和端口号
  • 我们需要将自己的项目上传至码云。这里我使用码云,主要是因为码云的私仓是免费的。
  • 我们需要进入服务器的ssh目录下复制id_rsa.pub里的公钥放在码云的ssh公钥中,可进入设置,具体看图

  • 我们也要把自己电脑上的ssh公钥在码云中设置,我这里是mac,在自己的用户目录下,可以按cmd+shift+.看隐藏文件(如果你设置过了,这一步就不要了)。
  • 服务器安装git,mongodb,pm2,nginx(如果服务器已经安装过了,就不需要了)
  • 需要开启mongodb
  • 我们在项目根目录新建一个ecosystem.json文件,这个文件是pm2的配置文件,具体的我就不说了,大家如果感兴趣可以去官网看看,(传送门☞pm2官网
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
"apps": [
{
//应用名称
"name": "chat",
//执行文件的路径
"script": "./build/server/static/js/server.js",
"env": {
"COMMON_VARIABLE": "true"
},
"env_production": {
"NODE_ENV": "production"
}
}
],
"deploy": {
"production": {
//服务器用户
"user": "xxx",
//服务器地址
"host": ["xxx"],
//服务器端口
"port": "xxx",
"ref": "origin/master",
//这里填你的项目git ssh
"repo": "xxx",
//服务器的存放项目路径
"path": "/www/chat/production",
"ssh_options": "StrictHostKeyChecking=no",
//钩子
"post-deploy": "npm --registry https://registry.npm.taobao.org install && npm run build && pm2 startOrRestart ecosystem.json --env production",
"env": {
//环境
"NODE_ENV": "production"
}
}
}
}
  • 在服务器新建项目目录新建/www/chat/文件夹。
  • 在本地电脑执行 pm2 deploy ecosystem.json production setup
  • 这里大家肯定会报错,这是我故意埋的坑,因为chat文件夹的权限不够,需要进入服务器的www文件夹,执行sudo chmod 777 chat
  • 进入服务器的.bashrc文件,注视掉上面的几行代码
  • source .bashrc重新载入一下.bashrc文件
  • 开启pm2服务 pm2 deploy ecosystem.json production
  • 这里可能有的人会报错,主要原因是本地电脑的pm2的权限问题,需要找到pm2文件夹,chmod 666 pm2
  • 如果上述问题都解决了最后会如图所示

  • 最后我们可以进入服务器,pm2 list,看到成功跑起来了

  • 如果应用在不断的重启,说明开启失败了,需要pm2 logs看看日志

  • 我们可以访问服务器地址:8088,并看到应用跑起来了

域名代理

  • 我们进入阿里云控制台解析自己的域名(传送门☞阿里云

  • 添加一条记录

  • 回到服务器,我们修改nginx配置文件,通过反向代理,让我们通过域名也可以访问他
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
upstream chat {
server 127.0.0.1:8088;
}
server {
listen 80;
server_name www.webman.vip;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_pass http://chat;
proxy_redirect off;
}
# 静态文件地址
location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
root /www/website/production/current/build;
}
}
  • 在服务器执行sudo nginx -s reload,重启nginx。此时我们就可以通过我们的域名地址访问到我们的应用了。

  • 这里可能访问会404,这个时候我们需要看一下我们服务器的防火墙,sudo vi /etc/iptables.up.rules,修改mongodb的对外端口,并且重启防火墙sudo iptables-restore < /etc/iptables.up.rules

1
2
-A INPUT -s 127.0.0.1 -p tcp --destination-port 8088 -m state --state NEW,ESTABLISHED -j ACCEPT
-A OUTPUT -d 127.0.0.1 -p tcp --source-port 8088 -m state --state ESTABLISHED -j ACCEPT
  • 查看阿里云控制台的安全组是否开了对应的端口

  • 最后最后!!!,终于成功了。可以点击链接查看一下。 走你!

  • 当然下次如果你想直接更新项目,可以在项目对应的路径提交到git上,然后再使用pm2 deploy ecosystem.json production即可在服务器上自动部署