【全栈项目上线(vue+node+mongodb)】05.vue项目上线(webhooks pm2 docker 自动化上线)

发布时间:2019-05-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【全栈项目上线(vue+node+mongodb)】05.vue项目上线(webhooks pm2 docker 自动化上线)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

项目上线常用方案:

把本地的代码打包压缩一份上传到服务器,然后解压到相应地方
从GitHub拉去到相应的地方
配置git webhooks 自动化上线
配置 pm2 自动化上线
使用docker 自动化上线

我们以vnshop项目作为案例

https://github.com/itguide/vn...

把本地的代码打包压缩一份上传到服务器,然后解压到相应地方

把本地的代码压缩一下,然后上传到服务器

在我们的vue项目里面的client里面执行以下命令

npm run build 

这个命令用来把vue项目编译成生产环境需要的文件

生成一个dist 文件夹,把这个文件夹,压缩成zip格式的文件

然后通过xshell 上传到服务器

第一步:安装 lrzsz

apt-get install lrzsz -y

sz:将选定的文件发送到本地机器
rz:运行该命令会弹出一个文件选择窗口,从本地选择文件上传到Linux服务器
rz,sz是Linux/Unix同Windows进行ZModem文件传输的命令行工具,

第二步:把本地的压缩打包的项目文件通过rz命令上传到服务器

在 /home/wwwroot/ 目录里面执行

cd /home/wwwroot/

执行rz命令,然后跳出一个框,让你选择本地需要上传到服务器的文件。

rz

在服务器哪执行的命令,就上传到哪去

第三步:把上传后的项目,解压复制到网站访问的文件夹里面

添加一个网站,虚拟主机

lnmp vhost add

添加网详细请看 https://segmentfault.com/a/11...

把上传的压缩包解压:

 unzip dist.zip

解压完之后,生成一个 dist文件夹
需要把这个文件夹里面的所有文件复制到 vn.itnote.cn文件夹里面去,执行以下命令

cp -r dist/* vn.itnote.cn

cp 是拷贝 -r 是深度拷贝,如果里面是文件,需要用 -r /* 代表把dist 文件夹里面的所有文件都拷贝 后面的vn.itnote.cn 文件夹,是要拷贝的目的地

从GitHub拉取项目到相应的地方

第一步:域名绑定到这个主机,并且创建一个虚拟主机

【全栈项目上线(vue+node+mongodb)】05.vue项目上线(webhooks  pm2 docker 自动化上线)

lnmp vhost add

创建详细过程请看 https://segmentfault.com/a/1190000011791001

### 第二步:把项目拉取到主机

cd /home/wwwroot

git clone https://github.com/itguide/vnshop10.git vnshop

npm install -g cnpm --registry=https://registry.npm.taobao.org

cd /home/wwwroot/vnshop/client

cnpm i

npm run build

第三步:修改Nginx 配置

修改配置

别傻乎乎的复制,后面要修改自己需要配置的文件

vim /usr/local/nginx/conf/vhost/vx.itnote.cn.conf

【全栈项目上线(vue+node+mongodb)】05.vue项目上线(webhooks  pm2 docker 自动化上线)

server
    {
        listen 80;
        #listen [::]:80;
        server_name vx.itnote.cn ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/vnshop/client/dist/;

        include none.conf;
        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*.php$ { deny all; }

        include enable-php.conf;

        location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*.(js|css)?$
        {
            expires      12h;
        }

        location ~ /.well-known {
            allow all;
        }

        location ~ /.
        {
            deny all;
        }

        access_log  /home/wwwlogs/vx.itnote.cn.log;
    }

记得重启Nginx 配置哦

重启命令

/etc/init.d/nginx restart

最后在浏览器访问 vx.itnote.cn

稍后即将奉上

配置git webhooks 自动化上线

配置 pm2 自动化上线

使用docker 自动化上线

脚本宝典总结

以上是脚本宝典为你收集整理的【全栈项目上线(vue+node+mongodb)】05.vue项目上线(webhooks pm2 docker 自动化上线)全部内容,希望文章能够帮你解决【全栈项目上线(vue+node+mongodb)】05.vue项目上线(webhooks pm2 docker 自动化上线)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue