双十一新买的阿里云服务器,工作闲暇时摸索部署一个vue前端项目,记录操作

1.新买的阿里云服务器要重置密码,然后配置安全组,下载教育版xshell和xftp免费使用
2.使用xshell连接云服务器,我使用的是阿里云centOs的服务器

在这里插入图片描述
在这里插入图片描述
正常安全组配置好输入账号密码和远程公网ip就可以链接成功了,(记得阿里云安全组配置完成之后需要重启服务器)

3.安装nginx和nodejs

1)安装nodejs命令

cd /usr/src
wget http://nodejs.org/dist/v0.10.18/node-v0.10.18.tar.gz

2)安装nginx命令

// 安装nginx
sudo yum install nginx -y
// 启动nginx
nginx 
// 把nginx配置成全局命令
ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/
// 查看nginx配置位置
nginx -t
// 查看nginx启动状态
ps -ef | grep nginx
// 重启nginx
nginx -s reload

启动成功后在页面输入ip和端口能够访问到nginx欢迎页,重启后访问不成功我遇到的是用的账号不对,nginx默认是nginx用户,我用的是root用户,直接在nginx.config里面修改用户就可以了
在这里插入图片描述

4.在nginx创建一个app文件夹
mkdir app
5.使用xftp把vue打包好的项目放在app目录下

1)部署项目多个项目时,vue打包注意事项
配置文件

// vue.config.js
module.exports = {
  // publicPath: isPro ? '/vue/' : './', // 公共路径
  publicPath: '/vue/'
}
// router
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

2)打包后dist包放在app目录下新建一个vue-project文件夹可以放多个文件部署多个项目
3)更改nginx配置,使用nginx -t查看配置项的位置

nginx -t

在这里插入图片描述

// 使用命令进入配置项
vim etc/nginx/nginx.config
// 更改的内容
location /paper-generation {
   alias /app/vue-peoject/;
   try_files $uri $uri/ /vue-peoject/index.html;
   index index.html;
}
// 注意使用alias后面需要加/,使用root不用加/

配置完后重启nginx

nginx -s reload

正常情况下此时浏览器输入ip:端口/vue-project就可以访问到你部署的项目了

Logo

前往低代码交流专区

更多推荐