vueCLI3.0部署到阿里云服务器

vueCLI3.0部署服务器

因工作需要.vue项目部署到服务器上.使用finalShell链接服务器与xshell基本相同.Xftp6来传输文件

vue项目打包

npm run build

此时目录会多出一个dist文件夹.这就是我们打包好的项目.

可以进入dist文件夹,打开里边的index.html文件.但是发现是空白的.

这里提供一个方法可以查看,但只针对CLI3的架子.

在项目所在路径cmd

第一步执行:npm install -g serve
第二步执行:serve -s dist

随后复制地址到浏览器.如果能看到你的项目那就说明没有问题.

继续部署.

因为公司要求的部署并不是上线部署,每天的改动之后都要重新部署,所以就在网上找了一个自动部署的方法.

首先会用到scp2

npm install scp2 --save-dev

项目根目录新建文件 xxx.js

'use strict'
// 引入scp2
var client = require('scp2');

client.scp('./dist/', {    // 本地打包文件的位置
  "host": 'XXX.XX.XX.XXX', // 服务器的IP地址
  "port": 'XX',            // 服务器端口， 一般为 22
  "username": 'XXX',       // 用户名
  "password": '*****',     // 密码
  "path": 'XXX'            // 项目部署的服务器目标位置
}, err =>{
  if (!err) {
    console.log("项目发布完毕!")
  } else {
    console.log("err", err)
  }
})

上传代码时记得忽略此文件,文件里有你服务器的信息和账号密码.

在packge.js中写入下边两行命令

"upload": "node upload.js",
"deploy": "npm run build && npm run upload"

执行这个自动部署的文件

npm run deploy

项目打包完之后会执行我们的上传脚本.当然你也可以手动把文件移动到服务器文件夹.

nginx安装.

由于指定了版本的nginx,不能直接用命令来安装.

​ #下载文件

wget http://nginx.org/download/nginx-1.1.6.tar.gz

​ #解压缩

tar zxvf nginx-1.1.6.tar.gz   

​ #进入nginx目录

cd nginx-1.1.6

​ #配置nginx

./configure --prefix=/usr/local/nginx

​ #编译nginx（生成2进制）

make

​ #安装nginx（把生成的 2 进制复制到 prefix 指定的安装路径里

make install 

​ #清除上次的make命令所产生的object文件（后缀为“.o”的文件）及可执行文件。

make clean

​ #测试nginx

cd /usr/local/nginx/sbin
启动 ./nginx

​ #在浏览器输入虚拟机IP地址 可以看到Welcome to nginx! 证明安装并启动成功。

使用nginx+uwsgi启动项目

​ vi /usr/local/nginx/conf/nginx.conf 修改配置文件

 server {
         listen       80; # 端口号
         server_name  22.222.22.222;# 服务器地址
         #charset koi8-r;
         rewrite ^(.*)$ https://${server_name}$1 permanent;# 重定向到443端口
        #access_log  logs/host.access.log  main;
        location / {

            root /home/vue;  # 服务器静态文件存放地址
            index index.html; 
            try_files $uri $uri/ /index.html; 

           }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    },
    server {
    listen       443;
    server_name  22.22.22.222;
    root /home/wwwroot;
    location / {
        root /home/vue;
        index index.html;
        try_files $uri $uri/ /index.html;

    }

}

    

阿里云的端口开放需要去添加新的安全组策略.和vim的简单操作.这个自行百度吧.

重启nginx

cd /usr/local/nginx/sbin
./nginx -s reload

搞定!