在服务器上部署Vue项目

sentOS服务器上安装Nginx

Nginx的安装,参考:https://blog.csdn.net/wxyjuly/article/details/79443432

首先安装必要的库(nginx 中gzip模块需要 zlib 库,rewrite模块需要 pcre 库,ssl 功能需要openssl库)。

安装gcc gcc-c++

yum install -y gcc gcc-c++

安装PCRE库 

cd /software 

wget http://jaist.dl.sourceforge.net/project/pcre/pcre/8.33/pcre-8.33.tar.gz

tar -zxvf pcre-8.36.tar.gz

cd pcre-8.36

./configure

make && make install

安装SSL库 

cd /software 

wget http://www.openssl.org/source/openssl-1.0.1j.tar.gz

tar -zxvf openssl-1.0.1j.tar.gz

cd openssl-1.0.1j

./config

make && make install

安装zlib库存 

cd /software 

wget http://zlib.net/zlib-1.2.11.tar.gz

tar -zxvf zlib-1.2.11.tar.gz

cd zlib-1.2.11.tar.gz

./configure

make && make install

安装Nginx 

cd /software 

wget http://nginx.org/download/nginx-1.8.0.tar.gz

tar -zxvf nginx-1.8.0.tar.gz

cd nginx-1.8.0

 ./configure --with-pcre=../pcre-8.39/ --with-zlib=../zlib-1.2.11/ --with-openssl=../openssl-1.0.1j/

显示版本号 

此时只能在“/usr/local/nginx/sbin”下执行“./nginx -v”命令,需要设置软链接

设置软链接

 ln -s /usr/local/nginx/sbin/nginx /usr/bin/

此时,可在任意位置访问nginx 

重启服务器

重启服务器时提示:

原因:nginx没有有添加到系统服务,需要手动添加一个

在 /etc/init.d/下创建名为nginx的启动脚本即可,内容如下:

cd /etc/init.c/

vim nginx

#!/bin/bash
#
# chkconfig: - 85 15
# description: Nginx is a World Wide Web server.
# processname: nginx

nginx=/usr/local/nginx/sbin/nginx
conf=/usr/local/nginx/conf/nginx.conf
case $1 in
start)
echo -n "Starting Nginx"
$nginx -c $conf
echo " done"
;;
stop)
echo -n "Stopping Nginx"
killall -9 nginx
echo " done"
;;
test)
$nginx -t -c $conf
;;
reload)
echo -n "Reloading Nginx"
ps auxww | grep nginx | grep master | awk '{print $2}' | xargs kill -HUP
echo " done"
;;
restart)
$0 stop
$0 start
;;
show)
ps -aux|grep nginx
;;
*)
echo -n "Usage: $0 {start|restart|reload|stop|test|show}"
;;
esac

 为文件添加可执行权限:

再次输入命令即可:

访问ip,会显示如下界面:

将项目代码放在Nginx的访问目录 “/usr/local/nginx/html” 下即可。

在服务器上安装node,vue-cli3,npm

:若是在window下,则需要配置环境变量;在Linux下需要设置软连接。否则不能使用相应的命令。

1.在 sentOS 服务器上安装 node 

1.切换到你希望安装node的目录:

cd /software

2.使用 wget 命令(从网络上自动下载文件)下载 node。可下载别的版本。

wget https://npm.taobao.org/mirrors/node/v11.7.0/node-v11.7.0-linux-x64.tar.xz

3.解压下载的文件

tar -xvf node-v11.7.0-linux-x64.tar.xz

4.此时使用 node -v 并不能显示node的版本号,因为不能全局使用node命令,需要建立软链接,使其变为全局。类似window下需要配置全局变量。

我们看到 bin 目录 指向的是 user/bin:

软链接:

 ln -s /software/node-v11.7.0-linux-x64/bin/node /usr/bin/
 ln -s /software/node-v11.7.0-linux-x64/bin/npm /usr/bin/

创建后会指向 /user/bin/node 和 /user/bin/npm。

5.此时再输入 node -v 就会显示版本信息了

2.查看npm的版本信息

3.访问外网时比较慢,安装cnpm 淘宝镜像

创建软链接

4.全局安装 vue-cli

创建软链接:

查看版本信息:

在sentOS上安装 pm2

PM2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。

npm install -g pm2

创建软链接: 

ln -s /software/node-v11.7.0-linux-x64/bin/pm2 /usr/bin/

在sentOS上部署vue项目

1.在阿里云sentOS服务器上配置安全组

:不配置安全组,则访问不到

买个阿里云服务器,登录,点击“安全组”:

  • 22端口是Linux系统下SSH端口,用于远程连接。
  • 3389端口是Windows系统用于远程桌面连接的。

在此,需要开放一个80端口:

“安全组”->"管理实例"->"安全组规则"->"添加安全组规则"

:授权对象 若为0.0.0.0/0 则表示允许或拒绝所有IP的访问。

说明:因为Nginx服务器默认访问的端口为80,我在此没有修改,所以配置的安全组端口为80。可根据自己的配置设置对应的安全组端口。

2.修改vue项目的一些配置

若vue版本是3.0以上的,则在项目的根目录下新建“vue.config.js”文件,配置“publicPath”选项。

打开你的路由配置项,修改base的选项和publicPath一致:

3.将项目放在服务器上

进入写的vue项目中,使用命令“npm run build”将项目打包

打包好后,会在项目中出现“dist”目录,就是需要放在服务器的目录。

将 dist 目录重命名(名称任意,要和你配置的base路径对应),在这我改为“vue-admin”,将"vue-admin"(原dist目录)目录放在服务器的默认访问路径下,我的是“/usr/local/nginx/html”下。

猜你喜欢

转载自blog.csdn.net/Lyj1010/article/details/88545523