1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue项目上线(阿里云centos7+nginx)

Vue项目上线(阿里云centos7+nginx)

时间:2024-05-10 03:34:38

相关推荐

Vue项目上线(阿里云centos7+nginx)

由来

自己原来做的一个网易云音乐的项目最近想把它上线,而且服务器也买了好久,因为一直没有学习Linux知识就一直搁置着,近来暑假快到了就想着捣鼓一下,项目github地址,上线地址,阿里云备案也太麻烦了吧:),还有就是感谢大佬的网易云API

步骤

首先当然是阿里云服务器购买以及Vue项目的编写了,服务器购买就不说了,Vue项目打包npm run dev的时候要注意一下,主要是config/index.jsassetsPublicPath要配置成'./'(原来是'/'),不然在上线后会什么也没有,还有就是如果使用了axios跨域(跨端口)的话,并且是使用proxyTable配置如下的话:

proxyTable: {'/api': {target: 'localhost:3000',changeOrigin: true,pathRewrite: {'^/api': ''}}}// 主要主要是把localost:8080/api/songs(Vue默认监听8080端口),转发到localhost:3000/songs

那么需要配置一下nginx,这个是重点,待会讲

2. 购买好服务器后,就是在Linux里输命令了,关于远程连接工具以及文件上传工具我分别使用的Putty和Xftp,具体使用方法就不赘述了,下面就直接上代码了,Linux使用的是(阿里云centos7)

# yum -y install epel-release安装EPEL源# yum install nginx安装好nginx# yum install nodejs安装node# yum install pm2用于永久运行node应用,用于提供api服务# vi /etc/nginx/nginx.conf更改nginx配置,主要更改server配置server {...省略代码root /var/www/vuemusic;// 代码(npm run build之后dist文件夹里的文件,不要直接传dist文件夹)通过Xftp上传到/var/www/vuemusic目录下location / {root /var/www/vuemusic;index index.html;}location /api {rewrite ^.+api/?(.*)$ /$1 break;proxy_pass http://39.107.127.240:3000;// 作用和proxyTable差不多}}# nginx -s reload重启nginx,如果提示不存在该进程,则使用命令# niginx -c /etc/nginx/nginx.conf# cd /var/www/api把上面的文件通过git下载到windows,通过Xftp传到/var/www目录下,在把名字改成api,进入这个文件# npm install安装这个node服务器的依赖# pm2 start app.js --name='api'启动node服务器,并命名为api# pm2 list查看node应用是否启动

在浏览器输入ip地址就可以直接看到项目了

后期

虽然这个项目已经布置好了,但还是比较简陋,没有配置数据库(这个项目不需要,算是一个纯前端的项目),还有就是要想办法把这个项目放到二级路由下,不然一个服务器跑这么一个应用岂不是很亏:),后期还是的多学学linux以及nginx

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。