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的项目跑起来了

Linux通过nginx部署Vue项目设置反向代理配置详解

1、部署nginx

1.1、下载源码

1.2、解压

1.3、安装相应的开发工具

1.4、进入nginx目录进行编译安装

1.5、添加SysV启动脚本

1.6、赋予脚本执行权限

1.7、添加nginx服务进程用户

1.8、添加至服务器关联列表设置开机自启

1.9、启动nginx

2.0、彩蛋

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

2.1 配置讲解

2.2、部署Vue

相关文章

系统/运维最新文章

热门教程

Linux通过nginx部署Vue项目设置反向代理配置详解

1、部署nginx

1.1、下载源码

1.2、解压

1.3、安装相应的开发工具

1.4、进入nginx目录进行编译安装

1.5、添加SysV启动脚本

1.6、赋予脚本执行权限

1.7、添加nginx服务进程用户

1.8、添加至服务器关联列表 设置开机自启

1.9、启动nginx

2.0、 彩蛋

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

2.1 配置讲解

2.2、 部署Vue

相关文章

系统/运维最新文章

热门教程

1.8、添加至服务器关联列表设置开机自启

2.0、彩蛋

2.2、部署Vue