centos 安装nginx 并部署vue项目

一. 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文件路径*********************
 
}
最后 使用使用如下命令

重启即可

nginx -s reload
以下是在 CentOS 7 上使用 Nginx 部署 Vue 项目的步骤: 1. 安装 Nginx ```shell sudo yum install nginx ``` 2. 配置 Nginx 进入 Nginx 配置目录: ```shell cd /etc/nginx/conf.d ``` 创建一个新的配置文件: ```shell sudo nano myproject.conf ``` 在配置文件中添加以下内容: ``` server { listen 80; server_name yourdomain.com; root /var/www/myproject; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:3000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` 其中: - `listen` 指定 Nginx 监听的端口号,这里是 80。 - `server_name` 指定你的域名或者 IP 地址。 - `root` 指定 Vue 项目的根目录。 - `location /` 指定访问根路径时的处理方式,这里是尝试查找 URI 对应的文件或者目录,如果都找不到则返回 `index.html` 文件。 - `location /api/` 指定访问 `/api` 路径时的处理方式,这里是将请求转发到本地 3000 端口,需要结合你的后端接口进行调整。 保存并退出配置文件。 3. 部署 Vue 项目 将打包好的 Vue 项目文件复制到 `/var/www/myproject` 目录下: ```shell sudo cp -r /path/to/your/vue/project /var/www/myproject ``` 4. 启动 Nginx ```shell sudo systemctl start nginx ``` 5. 验证配置是否生效 在浏览器中访问你的域名或者 IP 地址,应该能够看到 Vue 项目的首页。 如果出现问题,可以查看 Nginx 的日志文件 `/var/log/nginx/error.log` 进行排查。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值