如何将打包好的静态网页部署至服务器

在完成书查查应用之后，需要将应用部署至服务器，记录一下部署的过。

本地成功运行

首先是运行 npm run build 打包应用，打包好的页面是无法直接访问的，具体原因在这里：Vue-cli 部署。

大概内容是：

dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 baseUrl 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器。

所以我需要使用 Node.js 起一个静态服务器，我这里用的是 Express，方法： 利用 Express 托管静态文件。

只需要很简单的几行代码：

const express = require('express');
const app = express();
app.use(express.static('./dist'));

const port = 3003;

app.listen(port, function (err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log('Listening at http://localhost:' + port + '\n');
});
复制代码

然后运行 node filename.js 服务就成功起来啦。这时候访问 localhost:3003 就可以访问部署好的静态页面。

下一步是上传代码到服务器。

上传文件到服务器

我使用的是 scp 命令上传文件到服务器上的，具体代码是：

scp -r ./dist root@120.79.162.***:/home/library-book-search/web/

// 将 dist 文件夹 上传至 120.79... 的 /home/library-book/search/web/ 中
复制代码

• scp：上传命令
• -r：上传文件是文件夹
• ./dist：本地需要上传文件的位置
• root@120...：使用 root 用户名登录远程服务器 120....
• :/home/library-book-search/web/：表示保存在远程服务器上的地址

回车之后输入服务器密码，就可以等待文件上传成功了。

在服务器上起服务

首先进入到项目所在的文件夹，然后和在本地一样，运行 node filename.js 这样服务就成功跑起来了，然后访问发现并不 ok，捣鼓半天之后阿里云这个端口并不是默认开放的，所以需要在阿里云的控制台把这台服务器需要使用的端口打开。

成功开启端口之后终于访问成功了，于是美滋滋的关掉命令行，准备和朋友炫耀一番，结果打脸了，又访问失败了。再一顿思考之后发现，当关闭命令行界面之后，node 服务会自动关闭。所以我们的服务就扑街了。

这个时候就需要使用 PM2 来维护我的服务啦，在服务起上全局安装 PM2 之后，pm2 start filename.js ，项目就真正的完美啦。这下关掉命令行界面也不用担心任务爆炸了。