新装linux系统(centOs7)使用nginx驱动vue项目

新装linux系统(centOs7)使用nginx驱动vue项目

配置linux环境

• centos安装nginx

1. 安装nginx前首先要确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel
   查看是否安装gcc: yum list installed | grep "gcc"
   安装命令: yum -y install gcc pcre-devel zlib-devel openssl openssl-devel
2. 下载nginx安装包
   下载安装包: wget https://nginx.org/download/nginx-1.3.0.tar.gz
   解压缩安装包: tar -zxvf nginx-1.3.0.tar.gz
   进入安装目录 cd nginx-1.3.0
   配置安装程序,推荐使用默认配置 ./configure
3. 编译安装
   配置好之后输入make即: make
   然后回车，如果编译出错，请检查是否前面的4个安装都没有问题。
   编译成功之后，就可以安装了，输入以下指令：make install
   好了安装结束

• 启动nginx

1. nginx的一些命令
   进入/usr/local/nginx/sbin目录
   启动: ./nginx (若端口被占用，使用如下命令：fuser -k 80/tcp)
   关闭: ./nginx -s quit 或者 ./nginx -s stop
   重启: ./nginx -s reload
   查看进程: ps aux|grep nginx
2. 开机启动
   在rc.local增加启动代码即可vim /etc/rc.local
   按键盘 i 然后在底部增加: /usr/local/nginx/sbin/nginx

---

• ubuntu安装nginx

1. 执行以下安装命令 sudo apt-get install nginx
2. 查看是否安装成功 nginx-v
3. 重启nginx service nginx restart
4. nginx安装目录 /etc/nginx/

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

• 将打包后文件放至 /var/wwwroot/ 中

---

编辑nginx配置

1. 进入nginx配置文件目录:
   cd /usr/local/nginx/conf （centOs）
   cd /etc/nginx (ubuntu)
2. 使用vim编辑nginx文件: vim nginx.conf
   在http中添加一个server配置入下所示

   http{
       #这是你部署的server配置
       server {
        listen       8080;
        server_name  127.0.0.1;
        root /var/wwwroot/goallout_pc;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            # root   html;
            index  index.html index.htm;
            # 解决刷新页面变成404问题的代码
            try_files $uri $uri/ /index.html;  
        }
        #解决跨域问题，将你后端的地址写在 proxy_pass 后面就可以了
        location /api {   
            # 下面这行也要改为api   
            rewrite ^.+api/?(.*)$ /$1 break;
            proxy_pass http://192.168.0.3:19095/;
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
            }
       }
   }
   

如果需要配置多个vue项目，只需添加多个server配置即可
配置完成后重启nginx服务即可

另：centOs需要配置防火墙

• 需要开启对应的防火墙端口

1. 检查防火墙状态 firewall-cmd --state
   running 表示防火墙是开启的，如果你看到的是 not running，则表示防火墙关闭
   开启命令: systemctl start firewalld.service
2. 开放 8080 端口 firewall-cmd --zone=public --add-port=8080/tcp --permanent
3. 重启防火墙 systemctl restart firewalld.service
4. 重新载入配置 firewall-cmd --reload

---