nginx 部署vue 项目样式丢了

转载

mob64ca1416b5a8 2024-12-16 20:50:44

文章标签 nginx 部署vue 项目样式丢了 nginx linux centos html 文章分类 运维

一. gcc 安装

安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装：

yum install -y gcc-c++

二. PCRE pcre-devel 安装

PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库，pcre-devel 是使用 pcre 开发的一个二次开发库。nginx也需要此库。命令：

yum install -y pcre pcre-devel

三. zlib 安装

zlib 库提供了很多种压缩和解压缩的方式， nginx 使用 zlib 对 http 包的内容进行 gzip ，所以需要在 Centos 上安装 zlib 库。

yum install -y zlib zlib-devel

四. OpenSSL 安装

OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议，并提供丰富的应用程序供测试或其它目的使用。
nginx 不仅支持 http 协议，还支持 https（即在ssl协议上传输http），所以需要在 Centos 安装 OpenSSL 库。

yum install -y openssl openssl-devel

五.下载nginx

使用wget命令下载。确保系统已经安装了wget，如果没有安装，执行 yum install wget 安装。

// 可以去官网找自己想要的版本
wget -c https://nginx.org/download/nginx-1.17.0.tar.gz

六.解压

解压前首先看系统是否安装过nginx

find -name nginx

如果有删除命令

yum remove nginx

tar -zxvf nginx-1.17.7.tar.gz

七. 安装

# 进入nginx目录
cd  nginx-1.17.7
./configure 
--user=nobody 
--group=nobody 
--prefix=/usr/local/nginx 
--with-http_stub_status_module
--with-http_gzip_static_module 
 --with-http_realip_module 
 --with-http_sub_module 
 --with-http_ssl_module
 
make
make install

–user=name：设置nginx工作进程的用户。安装完成后，可以随时在nginx.conf配置文件更改user指令。默认的用户名是nobody。–group=name类似
–prefix=PATH ：指定nginx的安装目录。默认 /usr/local/nginx
–with-http_stub_status_module ：用来监控 Nginx 的当前状态
–with-http_realip_module ：通过这个模块允许我们改变客户端请求头中客户端IP地址值(例如X-Real-IP 或 X-Forwarded-For)，意义在于能够使得后台服务器记录原始客户端的IP地址
–with-http_ssl_module ：使用https协议模块。默认情况下，该模块没有被构建。前提是openssl与openssl-devel已安装

八. 创建全局命令

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

九. 启动，重启，停止

./nginx  
# 停止 相当于先查出nginx进程id再使用kill命令强制杀掉进程
./nginx -s stop  
# 停止 相当于是待nginx进程处理任务完毕进行停止
./nginx -s quit
# 重启
./nginx -s reload

十.防火墙设置

systemctl start firewalld            # 开启防火墙
systemctl stop firewalld            # 关闭防火墙
systemctl status firewalld            # 查看防火墙状态
systemctl enable firewalld            # 开机自动启动
systemctl disable firewalld            # 关闭开机启动

firewall-cmd --zone=public(作用域) --add-port=80/tcp(端口和访问类型) --permanent(永久生效)
firewall-cmd --zone=public --add-service=http --permanent
firewall-cmd --zone=public --add-service=https --permanent

# 修改防火墙规则后，需要重新载入
firewall-cmd --reload
# 查看端口开放状态以及删除规则命令
firewall-cmd --zone= public --query-port=80/tcp
firewall-cmd --zone= public --remove-port=80/tcp --permanent
# 查看开放的端口及服务
firewall-cmd --list-ports
firewall-cmd --list-services

十一.配置 nginx.conf

#user  nobody;
worker_processes  1;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
 
    #access_log  logs/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    server {
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   html;
            index  index.html index.htm;
        }
 
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
    }
    # *********************添加http服务主要看这里***********************
    server {
        listen       8001;
        server_name  localhost;
 
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
 
        location / {           
            root   root/dist;  #vue前端项目打包后放在这里             
            index  index.html index.htm;   #这个index.html  是上面dist目录下的index.html 
            try_files $uri $uri/ /index.html; # 解决刷新出现404                 
        }
 
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # *********************结束*********************
     # *********************配置其他 的服务时将这个server模块复制一份，修改监听端口和地址，以及root文件路径*********************
 
}