ubuntu nginx部署vue项目

安装nginx

sudo apt-get install nginx

启动nginx服务

sudo service nginx start

启动nginx

sudo systemctl start nginx

查看nginx状态

sudo systemctl status nginx

修改nginx配置文件

1.修改nginx.conf

cd /etc/nginx/nginx.conf
sudo gedit nginx.conf

替换

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {
	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
	include /etc/nginx/sites-enabled/*.conf;
}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
# 
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
# 
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
# 
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		wproxy      on;
#	}
#}

2.修改default文件

cd /etc/nginx/sites-enabled/default
sudo gedit nginx.conf

替换

server {
        listen       8080;                   #自己设置端口号
        server_name  localhost;        #自己设置ip地址
        #access_log  logs/host.access.log  main;
        location / {
            root   /home/yy/server_home/center/dist;        #这里写vue项目打包好的dist文件的地址
            index  index.html;               #这里是vue项目的首页，需要保证dist中有index.html文件
        }

	location /api/ {
		proxy_pass http://127.0.0.1:8889;   #后端接口地址
		proxy_cookie_path / /api;
		proxy_redirect default;
               	rewrite ^/api/(.*) /$1 break;
               	client_max_body_size 500m;
	}
}

修改配置后需要重启nginx

sudo systemctl restart nginx

!!!nginx配置两个服务

修改default文件

cd /etc/nginx/sites-enabled/default
sudo gedit nginx.conf

替换

server {
        listen       8080;                   #自己设置端口号
        server_name  localhost;        #自己设置ip地址
        #access_log  logs/host.access.log  main;
        location / {
            root   /home/yy/server_home/center/dist;        #这里写vue项目打包好的dist文件的地址
            index  index.html;               #这里是vue项目的首页，需要保证dist中有index.html文件
        }

	location /api/ {
		proxy_pass http://127.0.0.1:8889;        #后端接口地址
		proxy_cookie_path / /api;
		proxy_redirect default;
               	rewrite ^/api/(.*) /$1 break;
               	client_max_body_size 500m;
	}
}
server {
        listen       8081;                   #自己设置端口号
        server_name  localhost;        #自己设置ip地址
        #access_log  logs/host.access.log  main;
        location / {
            root   /home/yy/server_home/sub/dist;        #这里写vue项目打包好的dist文件的地址
            index  index.html;               #这里是vue项目的首页，需要保证dist中有index.html文件
        }

	location /api/ {
		proxy_pass http://127.0.0.1:8181;        #后端接口地址
		proxy_cookie_path / /api;
		proxy_redirect default;
               	rewrite ^/api/(.*) /$1 break;
               	client_max_body_size 500m;
	}
}