首页 > 其他 > 详细

21.多端项目上线部署(3)部署前端项目newpc

时间:2020-07-04 09:53:45      阅读:70      评论:0      收藏:0      [点我收藏+]

1.上传项目newpc

1.打包

在newpc目录下,将node_modules目录删除,然后将newpc项目打包为zip包

技术分享图片

 

 2.上传newpc.zip到云服务器上

技术分享图片

 

 技术分享图片

 

 3.解压newpc.zip

unzip newpc
ls

技术分享图片

 

 2.配置环境

1.安装node、npm、cnpm

#如果刚通过xshell连接到云服务器,需要切换到root,sudo -i;
apt install nodejs
y
apt-get install npm
y
node -v
npm -v
npm install cnpm -g --registry=HTTPS://registry.npm.taobao.org;
cnpm -v

2.安装依赖包

cd newpc
cnpm install

3.项目打包

1.修改项目的host

cd src/api/
ls
vim api.js
i#进入编辑模式,将host的127.0.0.1,修改为公网IP,然后点击【Esc】键,输入:wq,保存退出

2.打包项目

cd ../..
npm run build

4.安装Nginx 建立软链接

(在部署后端项目的时候已经安装过了)

5.修改nginx配置文件

cd /etc/nginx/sites-available/
ls
vim newcenter.conf

 

i #进入编辑状态,加入如下内容:

 

server{
    listen 80;
    server_name 公网IP;
    location / {
    root /home/ubuntu/newpc/dist;
    index index.html;
    }
}

技术分享图片

 点击【Esc】键,输入:wq,保存退出

nginx -t     #查看Nginx运行情况
service nginx restart    #重启Nginx

 

6.访问测试

浏览器端访问:

http://公网IP

技术分享图片

 

 注意:从效果图可以看到,网页因为没有登录管理员密码,所以自动跳转到登录页面。备案信息,等域名备案完成后,要进行替换。

 

21.多端项目上线部署(3)部署前端项目newpc

原文:https://www.cnblogs.com/xuepangzi/p/13233520.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!