双十一新买的阿里云服务器，工作闲暇时摸索部署一个vue前端项目，记录操作
1.新买的阿里云服务器要重置密码，然后配置安全组，下载教育版xshell和xftp免费使用
2.使用xshell连接云服务器，我使用的是阿里云centOs的服务器
20201207162851551.png
在这里插入图片描述
正常安全组配置好输入账号密码和远程公网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皆可以访问到你部署的项目了
网友评论