Linux通過nginx部署Vue項目設置反向代理配置詳解

1、部署nginx

1.1、下載源碼

查看nginx包路徑：http://nginx.org/download/

1.2、解壓

tar xvf nginx-1.16.1.tar.gz  -C /usr/local/src/

1.3、安裝相應的開發工具

yum groupinstall "Development tools"
yum -y install gcc wget gcc-c++ automake autoconf libtool libxml2-devel libxslt-devel perl-devel perl-ExtUtils-Embed pcre-devel openssl-devel

1.4、進入nginx目錄進行編譯安裝

# 進入目錄
cd /usr/local/src/nginx-1.16.1
# 執行以下命令 直接粘貼即可
./configure \
--prefix=/usr/local/nginx \
--sbin-path=/usr/sbin/nginx \
--conf-path=/etc/nginx/nginx.conf \
--error-log-path=/var/log/nginx/error.log \
--http-log-path=/var/log/nginx/access.log \
--pid-path=/var/run/nginx.pid \
--lock-path=/var/run/nginx.lock \
--http-client-body-temp-path=/var/tmp/nginx/client \
--http-proxy-temp-path=/var/tmp/nginx/proxy \
--http-fastcgi-temp-path=/var/tmp/nginx/fcgi \
--http-uwsgi-temp-path=/var/tmp/nginx/uwsgi \
--http-scgi-temp-path=/var/tmp/nginx/scgi \
--user=nginx \
--group=nginx \
--with-pcre \
--with-http_v2_module \
--with-http_ssl_module \
--with-http_realip_module \
--with-http_addition_module \
--with-http_sub_module \
--with-http_dav_module \
--with-http_flv_module \
--with-http_mp4_module \
--with-http_gunzip_module \
--with-http_gzip_static_module \
--with-http_random_index_module \
--with-http_secure_link_module \
--with-http_stub_status_module \
--with-http_auth_request_module \
--with-mail \
--with-mail_ssl_module \
--with-file-aio \
--with-ipv6 \
--with-http_v2_module \
--with-threads \
--with-stream \
--with-stream_ssl_module
# 完成編譯
make && make install

mkdir -pv /var/tmp/nginx/client

1.5、添加SysV啟動腳本

# 創建文件
vi /etc/init.d/nginx

# 按i進入編輯狀態
#!/bin/sh
#
# nginx - this script starts and stops the nginx daemon
#
# chkconfig: - 85 15
# description: Nginx is an HTTP(S) server, HTTP(S) reverse \
# proxy and IMAP/POP3 proxy server
# processname: nginx
# config: /etc/nginx/nginx.conf
# config: /etc/sysconfig/nginx
# pidfile: /var/run/nginx.pid
# Source function library.
. /etc/rc.d/init.d/functions
# Source networking configuration.
. /etc/sysconfig/network
# Check that networking is up.
[ "$NETWORKING" = "no" ] && exit 0
nginx="/usr/sbin/nginx"
prog=$(basename $nginx)
NGINX_CONF_FILE="/etc/nginx/nginx.conf"
[ -f /etc/sysconfig/nginx ] && . /etc/sysconfig/nginx
lockfile=/var/lock/subsys/nginx
start() {
[ -x $nginx ] || exit 5
[ -f $NGINX_CONF_FILE ] || exit 6
echo -n $"Starting $prog: "
daemon $nginx -c $NGINX_CONF_FILE
retval=$?
echo
[ $retval -eq 0 ] && touch $lockfile
return $retval
}
stop() {
echo -n $"Stopping $prog: "
killproc $prog -QUIT
retval=$?
echo
[ $retval -eq 0 ] && rm -f $lockfile
return $retval
killall -9 nginx
}
restart() {
configtest || return $?
stop
sleep 1
start
}
reload() {
configtest || return $?
echo -n $"Reloading $prog: "
killproc $nginx -HUP
RETVAL=$?
echo
}
force_reload() {
restart
}
configtest() {
$nginx -t -c $NGINX_CONF_FILE
}
rh_status() {
status $prog
}
rh_status_q() {
rh_status >/dev/null 2>&1
}
case "$1" in
start)
rh_status_q && exit 0
$1
;;
stop)
rh_status_q || exit 0
$1
;;
restart|configtest)
$1
;;
reload)
rh_status_q || exit 7
$1
;;
force-reload)
force_reload
;;
status)
rh_status
;;
condrestart|try-restart)
rh_status_q || exit 0
;;
*)
echo $"Usage: $0 {start|stop|status|restart|condrestart|try-restart|reload|force-reload|configtest}"
exit 2
esac

1.6、賦予腳本執行權限

chmod +x /etc/init.d/nginx

1.7、添加nginx服務進程用戶

groupadd -r nginx
useradd -r -g nginx nginx

1.8、添加至服務器關聯列表 設置開機自啟

chkconfig --add nginx

chkconfig nginx on

1.9、啟動nginx

service nginx start

# nginx目錄下html文件夾路徑
/usr/local/nginx/html
# nginx配置文件路徑
/etc/nginx/nginx.conf

2.0、 彩蛋

# nginx常用命令
start nginx 	#啟動nginx
nginx -s stop   #關閉nginx
nginx -s reload #重新加載配置
nginx -s reopen #重新打開
nginx -t 		#檢測配置文件是否正常

有時候修改完配置文件，發現沒有生效，即便執行了reload命令也不行，這時候可以使用終極大招，殺掉進程，再開啟nginx就可以了。
taskkill /IM nginx.exe /F —關閉所有nginx進程

# 通過端口查看進程
[root@VM_0_11_centos ~]# lsof -i:8080
COMMAND   PID  USER   FD   TYPE    DEVICE SIZE/OFF NODE NAME
nginx   28428  root    6u  IPv4 426894682      0t0  TCP *:webcache (LISTEN)
nginx   28429 nginx    6u  IPv4 426894682      0t0  TCP *:webcache (LISTEN)
# 殺死進程
[root@VM_0_11_centos ~]# kill -9 28428
[root@VM_0_11_centos ~]# kill -9 28429

# nginx指定配置文件啟動
# nginx -c 配置文件
[root@VM_0_11_centos ~]#/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

2、nginx配置文件講解及部署vue

2.1 配置講解

# 進入nginx配置目錄
[root@VM_0_11_centos ~]# cd /etc/nginx
# 查看nginx配置
[root@VM_0_11_centos nginx]# cat 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 {
        # 表示監聽ip為 49.235.2.145 端口為 8080的請求
        listen       8080;
        server_name  49.235.2.145;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		# 監聽到請求后 會去html文件夾下尋找index.html頁面
        location / {
          root   html;
          index  index.html index.htm;
        }
		# 監聽到請求中帶有/w1/后 通過代理會走http://49.235.2.145:18088/
        location /w1/ {
          proxy_pass  http://49.235.2.145:18088/;
        }
		# 監聽到請求中帶有/api/后 通過代理會走http://49.235.2.145:18098/
        location /api/ {
          proxy_pass  http://49.235.2.145:18098/;
        }

        #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;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

2.2、 部署Vue

# vue的項目,輸入命令 npm run build 他會在你的vue目錄下生成一個dist文件夾里面就是你的vue的項目

# 然后打開這個dist文件夾把里面的內容復制下來里面會有兩個文件一個是index.html是主目錄還有一個是static文件夾

# 把他們復制下來然后打開你的nginx的目錄下的html文件里面會有兩個默認文件直接刪掉不要留，然后把你剛剛復制的文件粘貼進去

# 然后打開瀏覽器輸入最開始改的端口號localhost:你所改的端口號回車；你就會看到自己的vue的項目跑起來了