本地服务器部署

server.js:

const express = require('express')
const history = require('connect-history-api-fallback')

const PORT = 8088

const app = express()

// 插件，处理 前端 history 路由刷新404问题
app.use(history())

app.use(express.static(__dirname + '/public'))

app.listen(PORT, () => {
  console.log(`Server is running http://localhost:${PORT}`)
})

把打包后的文件放在 public 目录下，启动 npx nodemon server.js，打开

http://localhost:8088/

即可访问。

nginx 服务器部署

安装 nginx， conf 文件夹下有 nginx.conf 配置文件，修改端口号为8099：

server {
    listen       8099;
    server_name  localhost;

    location / {
        root   html;
        index  index.html index.htm;
    }
    ...
}

双击 nginx 安装包根目录下的 nginx.exe, 打开 localhost:8099 及可访问到 nginx安装包/html/index.html 页面。

设置让 nginx 打开 前端项目打包后的页面，更改root html路径（或者直接替换/html/index.html），进程管理器里停止 nginx，再重启：

server {
    listen       8099;
    server_name  localhost;

    location / {
        root   E:\xhh\myproject\xhh-project\dist;
        index  index.html index.htm;
    }
    ...
}

处理 前端 history 路由刷新404问题，重启服务：

location / {
    root   E:\xhh\myproject\xhh-project\dist;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

云服务器部署

1. 购买云服务器，记住 公网IP 和 密码
2. 客户端安装 XShell 教育版，连接服务器
3. 比如在/var/目录下新建 dist 目录，并上传项目打包文件
4. XShell 安装 nginx：执行命令 yum install nginx -y，安装完后可以在 /etc/ 看到 nginx
5. 打开 nginx.conf，配置 location 的 root 为 /var/dist
6. XShell 启动 nginx：执行命令 service nginx start
7. 浏览器输入 公网IP 即可访问
8. 申请域名，绑定公网IP