CaiJin's Life Notes

生活筆記

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

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

本地成功运行

首先是运行 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/ 中

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

在服务器上起服务

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

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

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

PREVIOUS

关于我的 2018

NEXT

一个因文件名称大小写产生的错误

ALL TAGS