Vue项目上线(阿里云centos7+nginx)
由来
自己原来做的一个网易云音乐的项目最近想把它上线,而且服务器也买了好久,因为一直没有学习Linux知识就一直搁置着,近来暑假快到了就想着捣鼓一下,项目github地址,上线地址,阿里云备案也太麻烦了吧:),还有就是感谢大佬的网易云API
步骤
- 首先当然是阿里云服务器购买以及Vue项目的编写了,服务器购买就不说了,Vue项目打包
npm run dev
的时候要注意一下,主要是config/index.js
里assetsPublicPath
要配置成'./'
(原来是'/'
),不然在上线后会什么也没有,还有就是如果使用了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
Vue项目上线(阿里云centos7+nginx)相关推荐
- 部署vue项目到阿里云服务器
一般前端工程师只会使用npm run serve 在开发环境下验证,那么如何把npm run build 打出的包部署到服务器上进行上线呢?这篇文章就详细阐述这一流程. 1. 购买或试用阿里云服务器 ...
- 2021最新 阿里云Centos7+Nginx部署Hexo静态博客
[限时]1年86元,3年229元,用来建站和编程学习[限时领取阿里云2000元建站礼包] 前言 之前在服务器用WordPoress,Eblog程序搭建过个人博客,因为平时也不写什么,导致服务器过期也没 ...
- 项目上线阿里云(二) 在云上(基于ubuntu系统)安装JDK8,tomcat8
首先采用xshell联接上阿里云, 如还不能联接请查看前一篇文章. 在线安装jdk8. jdk有两个版本, 一个开源版本Openjdk,还有一个oracle官方版本jdk, 两者在程序上非常接近. ...
- vue项目接入阿里云智能验证
首先是官方链接 https://help.aliyun.com/document_detail/122767.html?spm=5176.2020520162.0.0.5ca95fb04qNiKh 有 ...
- 阿里云centos7部署:nginx+uwsgi+django+vue
基础环境 阿里云centos7 部署架构 nginx + uwsgi nginx提供静态文件服务和反向代理: uwsgi充当Web服务器: 部署过程 修改项目的配置文件,配置收集静态文件之后存放的目录 ...
- vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包 扔服务器 one 前期准备 首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
- 部署Django项目到阿里云(五)——反向代理及均衡负载技术Nginx
上一篇:部署Django项目到阿里云(四)--用uWSGI运行Django项目 在上节中,已经能将django项目部署到阿里云,远程连接了. 但是实际项目中,一般一台服务器满足不了高并发的要求,所以为 ...
- 在阿里云centos7.4上配置nginx免费的https证书,支持泛解析
在阿里云centos7.4上配置nginx免费的https证书,支持泛解析 一 原理说明: 使用acme.sh工具来生成证书,但为了方面采用的使用dns添加TXT记录验证方式,跟传统的webroot有 ...
- 阿里云centos7下环境部署和项目部署
阿里云centos7下环境部署和项目部署系统环境: 阿里云centos7系统 linux下的jdk1.8 linux下的tomcat8 linux下的mysql5.7 jdk1.8的安装 下载jdk官 ...
最新文章
- 京东11.11大促背后,那些系统架构经历了些什么
- iptables的conntrack表满了导致访问网站很慢
- php怎么把文字改成黑色,微信如何调成黑色模式?
- 回调函数到底是怎么一回事呢
- MySQL【付诸实践 01】Linux 环境 MySQL 数据库备份 shell 脚本(脚本源码及说明+定时任务配置+数据库恢复测试)粘贴可以
- Go语言范围(Range)
- 中国大学MOOC-陈越、何钦铭-数据结构-2019春期末考试(题目+部分解答)
- 管理员所有权代码_为什么代码所有权糟透了,您永远不应该在有实践的地方工作...
- 计算机仿真在机械行业中的应用,计算机仿真技术机械行业应用
- 安全使用计算机事例,计算机安全案例分析.ppt
- hough变换直线检测_CV学习笔记(十五):直线检测
- Oracle新建用户、角色,授权,建表空间
- 2015 UESTC 数据结构专题N题 秋实大哥搞算数 表达式求值/栈
- tbschedule
- Mac升级系统后,idea中Git无法使用:xcrun: error: invalid active developer path
- 在vue中使用three.js创建一个简单的立体图形
- 伪标签Web2.0?
- tableau 连接python
- ngRx 官方示例分析 - 2. Action 管理
- C# Winform 置顶属性Topmost 的误区