vue 项目 部署服务整个流程

之前部署vue项目都是直接npm run build之后将dist目录下面的文件放在服务器上,在部署之前服务器已经安装了apache或者nginx,并且已经做好了相应的配置.但是现在整个服务器没有安装apache和nginx,整个流程都需要自己来,下面我将记录一下这个过程.

1.使用express在本地生成一个容器,并起一个名字为app

npm install -g express-generator

express app

2.进入到app目录下,安装所需要的依赖

cd app
npm install

3.将dist文件下面的index.html和static文件复制到app目录下面的public下面,然后修改app目录下的app.js文件,
注意:如果涉及到跨域问题,一般会使用http-proxy-middleware插件做一个代理服务,
在 项目目录下安装依赖

  npm install --save-dev http-proxy-middleware

然后在app.js添加如下配置

//port
var proxyMiddleWare= require('http-proxy-middleware');
var app = express();
var proxyPath = "http://47.104.208.182:8010";//目标后端服务地址
var proxyOption ={
    target:proxyPath,
    changeOrigoin:true,
    ws: true,
    pathRewrite: { '^/api': '/' }
};
app.use(express.static(__dirname + "public"));
app.use("/api",proxyMiddleWare(proxyOption));
app.listen(4010);

注:app.listen(4010);4010是你的项目在服务器上的端口,proxyPath这个是你接口的地址.
4.按照这个流程操作之后,进入app这个目录下面输入npm start 即可

cd app
npm start

5.配置服务器 (后台已经分配了一个服务器和端口)

  在服务器上安装node环境,过程如下:

1.下载一个node.js的安装包,并复制到服务器的项目目录appWeb下面(appWeb是我的项目目录)
2.解压node.js的安装包
输入 tar -Jxv -f node-v8.9.3-linux-x64.tar.xz 解压安装包
解压之后用命令查看
cd node-v8.9.3-linux-x64
cd bin
输入 ./node -v //查看node版本 ./npm -v //查看npm版本
但是注意，这里虽然安装了node了，但是并不是所以的文件夹下都可以使用npm这个命令。所以我们接下来要创建node的软连接，类似window的快捷键，让所有的文件下都能正常的使用node及npm命令。
sudo 为获得root部分权限

sudo ln -s /usr/local/appWeb/node-v8.9.3-linux-x64/bin/node /usr/local/bin/node 
sudo ln -s /usr/local/appWeb/node-v8.9.3-linux-x64/bin/npm /usr/local/bin/npm  

注意：/usr/local/appWeb/这里是我自己的目录,你们可以通过pwd命令查看当前目录，然后改成自己的目录

设置完以上两个命令，我们就可以在 cd /usr/local/bin 查看里面的文件

接下来进入到项目/usr/local/appWeb/ 将本地用express生成的容器里面的目录复制到appWeb里面就行了
接下来是启动xhsell

进入到liinux环境中项目所在目录下面,使用命令nohup npm start &启动服务
如果想要查看端口,可使用命令sudo lsof -i :4010 查看,注意4010端口是app.js里面监听的端口
如果想要杀死进程,可使用命令 kill -9 45656 pid 其中45656是进程号
如果不想杀死,可试用exit 退出

这是我在工作的时候的自我总结,欢迎大家指正