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