部署vue项目到阿里云服务器
一般前端工程师只会使用npm run serve 在开发环境下验证,那么如何把npm run build 打出的包部署到服务器上进行上线呢?这篇文章就详细阐述这一流程。
1. 购买或试用阿里云服务器
作为新用户可以试用一个月阿里云服务器,阿里云官方网址如下:https://www.aliyun.com/?utm_content=se_1008364713
如果想试用的话需要实名认证,按步骤实名认证一下就可以了。
我们试用阿里云ESC服务器(选择CentOS),按步骤试用,稍等几分钟就会收到短信,创建实例成功。如下所示:
登录到阿里云服务器,直接点击远程连接选择workbench远程连接就可以了。
登录后会看到如下界面:
2. 安装Nginx
安装Nginx会依赖其他软件包,例如pcre,zlib, openssl等,安装命令如下:
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
用wget 下载Nginx,解压,编译,安装:
wget -c https://nginx.org/download/nginx-1.12.0.tar.gz
tar -zxvf nginx-1.12.0.tar.gz
cd nginx-1.12.0
./configure
make
make install
可能在make的时候会报2个错误,在网上搜一下就解决了。大概记得第一个错误的解决方法是在一个MakeFile中删除-Werror,第二个错误是注释一行代码就可以了。
可以用whereis 命令查看Nginx安装在哪了,一般会安装到/usr/local/目录下,接下来就启动Nginx,并打开默认页面:
cd /usr/local/nginx/sbin/
./nginx
在浏览器地址栏输入阿里云公网ip地址就会看到Nginx默认欢迎页面了。但不幸的是,打不开。
需要做如下配置:
1)改一下Nginx的服务器端口 80改为88,server_name改为公网ip地址
vim /usr/local/nginx/conf/nginx.conf
如下所示:
2)在阿里云服务器管理平台手动添加一个端口配置
安全组-> 配置规则 -> 手动添加
如下所示:
这样在浏览器地址栏输入ip地址+端口号就能打开Nginx默认欢迎页面了。
3. vue项目打包
直接npm run build就可以了。记得在vue.config.js中配置publicPath: "/",
如果vue-router 使用history模式,在new vue-router的时候记得做如下配置:
export default new Router({mode: 'history',base: '/',// base: process.env.BASE_URL,routes})
4. 用xftp把包上传到阿里云服务器Nginx安装目录下的/html目录
在xftp新建会话时,
1)主机名填我们开始在阿里云服务器公网IP地址
2)协议我们选择SFTP
3)端口号默认是22,不用修改
4)用户名和密码填写我的在阿里云服务器设置的,一般用户名在没有修改的情况下都是root。
如果vue项目build出的包 放在/home/dist目录下,那么相应配置文件也需要修改:
这样在浏览器中直接输入ip地址+端口号就可以看到我们的vue项目啦。如下所示:
5. 解决刷新页面出现404错误问题
在刷新页面的时候发现出现了404错误,这是Nginx配置有问题,需要增加如下配置:
location / {root html;try_files $uri $uri/ @router; //不加这行刷新页面会出现404错误index index.html index.htm;}//路由的路径资源并不是一个真实的路径,所以无法找到具体的文件//因此需要rewrite到index.html中,然后交给路由再处理请求资源location @router {rewrite ^.*$ /index.html last; }
6. 重启云服务器导致访问不了问题
在重启云服务器后,启动Nginx,再输入ip + port 结果没有成功加载网页。用命令查看Nginx 也都正常:
ps -ef | grep nginx //进程都正常
netstat -tlnup | grep nginx //Nginx 也处于listen状态
这是由于重启后把网络防火墙打开了。所以要关闭防火墙:
systemctl stop firewalld.service //关闭防火墙
systemctl status firewalld.service //查看防火墙状态
部署vue项目到阿里云服务器相关推荐
- 利用Jenkins自动化部署springboot项目到阿里云服务器(centos8)
背景: 最近想部署一个springboot项目到阿里云服务器里面.捣鼓了很久,构建了很多次,都失败了!实在是一脸辛酸,有点气馁~ 在此想记录一下构建的过程. 不了解Jenkins之前,觉得Jenkin ...
- mysql上传到阿里云服务器地址_从0部署Web项目到阿里云服务器上
前言 本篇文章的主要内容正如标题所言,这个过程说简单也还是有很多细节需要注意的,说难其实也挺简单的,还是希望我们大家都能勤动手去体会其中的内容,经历本身就可以使人进步.话不多说,让我们开始吧. 正文 ...
- 部署SSM项目到阿里云服务器ECS
文章目录 一. 问题背景 二. 准备资源 三. 安装JDK 3.1 下载 3.2 安装 3.3 配置环境变量 四. 安装MySQL 4.1 下载 4.2 解压缩 4.3 修改操作系统配置 4.4 卸载 ...
- 在windows环境中部署SSM项目到阿里云服务器-对象存储OSS
首先进入到阿里云官网:https://www.aliyun.com/,进入云服务器ECS,点击立即购买. 进入下面的界面,可以选择一键购买或者自定义购买 购买成功之后,点击管理控制台,进入购买之后的服 ...
- Linux之0基础入门,部署JavaWeb项目到阿里云服务器上,阿里云服务器安装MySQL并使用WorkBench连接,WorkBench导入SQL脚本,Linux之SSH和SFTP连接工具,
1.创建阿里云服务器 创建方法有两种,一种是购买云服务器,直接在阿里云控制台里可以找到.如图: 另一种是使用 阿里云 云起实验室的课程:搭建JavaWeb开发环境 提供的一次可以开两个小时的免费的服务 ...
- 如何部署javaweb项目到阿里云服务器
系统环境;centos7.4 64位 软件:jdk-8u181-linux-x64.tar.gz:mysql-5.7.23-linux-glibc2.12-x86_64.tar.gz: 第一步:申请 ...
- 如何部署后端项目到阿里云服务器
解析域名,创建网站 1.登录阿里云,购买服务器ESC 可以选择你自己喜欢的操作系统,建议购买Linux系统的 2.购买成功,可以点击控制台选择云服务器ESC进入服务器概览页面,查看自己的实例 3.点击 ...
- 部署Java web项目到阿里云服务器
文章目录 前提 安装putty 安装BT-Panel宝塔面板 安装JDK并配置环境变量 安装Tomcat并开放端口后 安装MySQL 本地Navicat管理远程MySQL 购买域名并解析域名及站点备案 ...
- 腾讯云服务器部署python项目(阿里云通用)
腾讯云服务器宝塔面板部署python项目(阿里云通用) 老师留的一项web作业完成的时候踩了很多坑,所以出个教程,大家一起学习进步. ## 购买云服务器 查看了腾讯云和阿里云的学生服务器的相关活动,为 ...
最新文章
- Python Qt GUI设计:QMainWindow、QWidget和QDialog窗口类(基础篇—10)
- 打造属于自己的underscore系列(五)- 偏函数和函数柯里化
- ICLR2020 | 图池化没有考虑图结构?一文带你了解最新图池化STRUCTPOOL
- 工业相机和镜头说明与图像采集
- Mycat 月分片方法 - pursuer.chen - 博客园
- OS / Linux / epoll 各种事件解析
- wxss 点击样式_微信小程序点击控件修改样式实例详解
- 前端学习(2373):项目介绍
- 基于上一篇AS项目依赖库问题的优化解决方案
- nginx优化——包括https、keepalive等
- Project Euler 001-006 解法总结
- VUE3.x(v-model)数据双向绑定指令
- 【IDEA】关于 IDEA 中新建 web 项目的 webapp 文件夹没有小蓝点 ,启动服务,访问不到解决方案
- 设计模式------简单工厂模式
- 免费复制百度文库上的内容
- 穿越计算机的迷雾--读书笔记三
- AD(altium designer)15原理图与PCB设计教程(二)—— 电路原理图设计
- 卡巴斯基携手微软MSN 卡巴斯基2010激活码免费领
- 10GE DWDM SFP+彩色光模块应用案例
- 学习游戏开发,先学OpenGL再学Direct3D还是直接学习Direct3D?
热门文章
- CC2640R2F BLE5.0 蓝牙协议栈GAP GATT 服务(GGS)
- 网易云音乐转码_网易云音乐又刷屏了?
- 如何设置ppt不能别修改
- 阅读 v3.20.031215 免费开源网络文学阅读器
- Hive 正则匹配函数 regexp_extract和 regexp_replace和rlike
- 安卓手机管理软件_老牌管理软件,已破,无广告,全功能不受限。安替换手机文件管理软件吧。...
- 我的第一个油猴脚本「屏蔽CSDN底下的登录栏」
- 姜昆、李文华相声《如此照相》,警醒
- 怎么从 SQL Server 数据库中导出 SQL 语句?
- tomcat组件的安装和调试