Vue.js项目代码上线

前端开发面试专业知识自我介绍 前端开发需要学设计吗 前端开发面试题软件
把项目文件放在服务器上面
实现方式1 打包,上传,解压
在本地打包,使用 lrzsz 或 ftp工具上传到服务器,然后解压到相应的位置
  1. 在xshell 工具连接Linux上面的时候,使用 apt-get install lrzsz -y
  2. 使用
  3. rz 命令,把window上的文件上传到服务器
  4. sz + 文件名字 命令,把服务器上面的文件发送到window上面
  5. 举个列子:把服务器的历史命令发送到window上面
  6. history > history.md # 把历史命令 写入到一个文件
  7. sz history.md # 此时会弹出一个窗口,让你选择保存的地方
  8. rz 把vue打包好的zip格式的包项目上传到服务器,然后unzip 解压
  9. 要命…
  10. rm -rf /
实现方式2 使用git ,本地push,服务器上pull
把项目拉下来
  1. git clone https://github.com/itguide/vnshop.git
  2. cd client # 切换到vue项目里面来
  3. npm i # 如果太慢,太卡,使用淘宝的镜像源 cnpm i
  4. npm run build # 把vue项目编译成生产环境需要的文件
实现方式3 使用git webhook 本地push 服务器自动pull

image.png-47.9kB

image.png-47.9kB
点击add webhook
利用下面的发布脚本
https://github.com/itguide/deploy.git
实现方式4 使用pm2 自动发布拉取
实现方式5 使用docker 打包成镜像,利用git push 事件,自动打包,测试,编译,发布,启动
把域名绑定到服务器上面
www :
将域名解析为www.example.com,填写www;
@ :
将域名解析为example.com(不带www),填写@或者不填写;
mail :
将域名解析为mail.example.com,通常用于解析邮箱服务器;
* :
泛解析,所有子域名均被解析到统一地址(除单独设置的子域名解析);
二级域名 :
如:mail.example.com或abc.example.com,填写mail或abc;
手机网站 :
如:m.example.com,填写m。

image.png-23.7kB

image.png-23.7kB
添加虚拟主机
lnmp vhost add
1.写入自己的域名
你想要添加更多的域名吗
2.网站访问的目录 写上自己域名对应的目录
3.添加静态规则
4.添加访问日志
一路回车

image.png-60.5kB

image.png-60.5kB
ngrok
出现了403 forbidden 怎么解决
  1. 403 Forbidden
  2. nginx
原因是:
nginx没有权限访问你的目录
nginx此时的用户组是 www:www 查看用户组的方式是: cat /etc/passwd

image.png-76.2kB

image.png-76.2kB
需要把这个用户组改成 www
执行以下命令
  1. chown -R www:www dist
  2. dist 是文件的名字 -R 是递归更改

image.png-26.7kB

image.png-26.7kB
如果想更 nginx 配置
  1. vim /usr/local/nginx/conf/vhost/vnshop.shudong.wang.conf
更改完配置 需要重启 nginx
    1. service nginx restart
把项目文件放到服务器上
放在这个路径地下/home/wwwroot
git clone https://github.com/itguide/vnshop.git
npm run build –report
域名解析
www :
将域名解析为www.example.com,填写www;
@ :
将域名解析为example.com(不带www),填写@或者不填写;
mail :
将域名解析为mail.example.com,通常用于解析邮箱服务器;
* :
泛解析,所有子域名均被解析到统一地址(除单独设置的子域名解析);
二级域名 :
如:www.rokub.com,填写www;
手机网站 :
如:m.rokub.com,填写m。
nginx反向代理
vim /usr/local/nginx/conf/vhost/misssu.cn.conf
每次更改 nginx 配置文件都要重启 nginx
service nginx restart
  1. location /api/ {
  2. proxy_pass http://127.0.0.1:3000/; # 当访问api的时候默认转发到 3000端口
  3. }
安装pm2
apt-get install pm2 -g
启动
pm2 start ./bin/www
作业:
1.写一个项目收获
收获了哪些细节越多越好
2.整理项目描述
职责:
业务:
技术栈:
心得:
3.把项目改造成自己的,logo改了,名字改,把这个项目重写包装一下。
4.把这个项目,上线,绑定域名,可以访问
web前端开发视频全套 前端开发初学视频 前端框架可视化开发工具
» 本文来自:前端开发者 » 《Vue.js项目代码上线》
» 本文链接地址:https://www.rokub.com/38101.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!