VUE项目部署到阿里云服务器上

VUE项目部署到阿里云服务器上

  • 前言
    • 需要的东西
    • 连接服务器
    • 安装gcc和g++编辑器
    • 解压nginx安装包
      • 进入nginx-1.8.1目录
      • make编译安装它
    • 安装zlib库
      • 安装 SSL
      • 安装 pcre
      • 安装 nginx
    • nginx 服务的基本操作
      • 启动服务
      • 重启服务
      • 查看服务
      • 停止服务
      • 查看配置
      • 重新载入配置
    • 打包vue项目并上传到服务器
    • 可能出现的问题及解决方法
      • 404或405
      • 403
      • nginx 报异常"/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)

前言

实验室项目需要加一个网页前端,前段时间成功部署,这两天发现教程链接失效了,决定自己记录一下,方便以后回顾。

需要的东西

nginx
Xshell+Xftp

连接服务器

Xshell和Xftp连接服务器,主机名为服务器ip,账号密码对应
nginx下载到本地,再通过Xftp上传到服务器
VUE项目部署到阿里云服务器上_第1张图片

安装gcc和g++编辑器

yum -y install gcc automake autoconf libtool make
yum install gcc gcc-c++

解压nginx安装包

tar -zxvf nginx-1.8.1.tar.gz

进入nginx-1.8.1目录

cd nginx-1.8.1

make编译安装它

./configure
make
make install

安装zlib库

cd ~
wget http://www.zlib.net/zlib-1.2.11.tar.gz
tar -zxvf zlib-1.2.11.tar.gz
cd zlib-1.2.11
./configure
make
make install

安装 SSL

yum -y install openssl openssl-devel

安装 pcre

yum -y install pcre-devel

安装 nginx

./configure
make
make install

nginx 服务的基本操作

启动服务

/usr/local/nginx/sbin/nginx

这个时候访问你服务器的公用 ip 地址,如果可以打开下面这样一个页面,说明 nginx 启动成功
VUE项目部署到阿里云服务器上_第2张图片

重启服务

/usr/local/nginx/sbin/nginx -s reopen

查看服务

ps -ef | grep nginx

VUE项目部署到阿里云服务器上_第3张图片
红框中的数字在停止服务时会用到

停止服务

kill 7332

查看配置

vi /usr/local/nginx/conf/nginx.conf

重新载入配置

在修改配置文件之后需要重新载入配置文件

/usr/local/nginx/sbin/nginx -s reload

打包vue项目并上传到服务器

执行 npm run build打包项目,打包成功之后,会在项目目录下多出一个dist文件夹,里面有一个static目录(存放有静态文件)和index.html,这就是打包以后的项目,用xftp把这个文件夹上传到服务器。待传输完成之后,打开xshell,运行

vim /usr/local/nginx/conf/nginx.conf

修改nginx的配置文件(vi里键入a进入编辑模式,修改完成后esc将光标移到文末,再键入:wq即可保存)
VUE项目部署到阿里云服务器上_第4张图片
在server的location中配置站点根目录,修改完成之后需要重新载入配置文件

/usr/local/nginx/sbin/nginx -s reload

此时访问服务器ip地址就可以看到部署成功的项目了。

可能出现的问题及解决方法

404或405

vue配置了跨域,可能会导致访问出现404或405等错误,因为vue配置的跨域只能在本地生效,打包之后就失效了,给nginx配置跨域即可解决。

403

权限错误,将nginx.config的user设置为启动用户

nginx 报异常"/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)

可能是nginx.conf的nginx.pid被注释了,把配置文件中pid前的#去掉保存退出重启即可

你可能感兴趣的:(服务器,nginx,centos)