linux部署vue项目

linux服务器部署vue项目

一. Linux服务器上安装nginx并且进行相关配置

1. 检查服务器是否安装了nginx相关依赖 gcc、pcre-devel、zlib-devel、openssl-devel

yum list installed | grep "gcc"

rpm -qa | grep "gcc"

dpkg -l | grep "gcc"

2. 安装对应依赖

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

3. 下载nginx

wget https://nginx.org/download/nginx-1.16.1.tar.gz

4. 解压

tar -zxvf nginx-1.16.1.tar.gz

5. 进入nginx-1.16.1 目录
6. 配置configure文件

./configure --prefix=/usr/local/nginx

7. 编译

make

8. 安装

make install

9. 测试是否安装成功

cd /usr/loca/nginx/

./sbin/nginx -t

10. 启动

cd /usr/local/nginx/sbin

./nginx

11. 查看运行状态

ps aux | grep nginx

12. 停止nginx

./nginx –s stop

二 nginx失败情况

1. 输入服务器地址无法访问

firewall-cmd --query-port=80/tcp 		#查看80端口

• FirewallD is not running (防火墙未开启)

systemctl start firewalld 		#开启防火墙

• no (80端口未开启)

firewall-cmd --add-port=80/tcp --permanent		#开启80端口

systemctl restart firewalld		#重启防火墙

2.访问主机

• 当使用阿里云服务器的时候需要配置阿里云安全组 开放端口访问
• 当 控制台查看80端口 提示yes 的时候 基本没问题了

3.当返回nginx Welcome to nginx! 则配置成功

三.部署Vue项目

1.打包项目

npm run build

获得 dist 项目文件夹

2.将项目上传至Linux服务器 /usr/local/webapp/

​ 可以使用Xshell Xftp 等工具

3.修改Nginx的conf文件

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

#修改如下
server {
        listen  80;
        server_name  aiprose.com; #你的域名
        include /etc/nginx/default.d/*.conf;
        index index.html index.htm index.php;
        root   /root/adminpage; #你的静态文件位置
        location / {
                try_files $uri $uri/ @router; #防止404
                index  index.html;
        }
        location @router {
                rewrite ^.*$ /index.html last;
        }
    }

4.使配置生效

到 sbin目录

./nginx -s reload
./nginx -s stop
./nginx

5.访问ip地址查看效果