Ubuntu下使用nginx发布vue项目

Ubuntu下使用nginx发布vue项目

1. Ubuntu18.04搭建nginx服务器

1.1 ubuntu安装nginx

sudo apt update
sudo apt install nginx

1.2 配置防火墙

ps: 防火墙配置部分可根据情况选择，一般不需要配置防火墙

sudo ufw app list

获得应用程序配置文件的列表
可用应用程序：
CUPS
Nginx Full
Nginx HTTP
Nginx HTTPS
OpenSSH

Nginx有三个配置文件可用：Nginx Full、Nginx HTTP、Nginx HTTPS
Nginx Full ：此配置文件打开端口80（正常，未加密的网络流量）和端口443（TLS / SSL加密流量）;
Nginx HTTP ：此配置文件仅打开端口80（正常，未加密的网络流量）;
Nginx HTTPS ：此配置文件仅打开端口443（TLS / SSL加密流量）;

$ sudo ufw allow 'Nginx HTTP'
$ sudo ufw allow 'Nginx HTTPS'

输入以下命令以启动防火墙，据知有部分用户是没有启动防火墙的，还是建议开启

$ sudo ufw enable

输入以下命令以查看防火墙状态：

$ sudo ufw status

1.3 验证Web服务器是否运行

sudo systemctl status nginx

可以通过浏览器输入服务器IP测试
可以通过以下命令启动nginx

sudo systemctl start nginx.service  //启动服务
sudo systemctl enable nginx.service //跟随系统启动服务

1.4 配置nginx

修改 /etc/nginx/sites-enabled/default

/etc/nginx/sites-enabled/default 文件内容如下

##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# https://www.nginx.com/resources/wiki/start/
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/
# https://wiki.debian.org/Nginx/DirectoryStructure
#
# In most cases, administrators will remove this file from sites-enabled/ and
# leave it as reference inside of sites-available where it will continue to be
# updated by the nginx packaging team.
#
# This file will automatically load configuration files provided by other
# applications, such as Drupal or Wordpress. These applications will be made
# available underneath a path with that package name, such as /drupal8.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

# Default server configuration
#
server {
	listen 80 default_server;
	listen [::]:80 default_server;

	# SSL configuration
	#
	# listen 443 ssl default_server;
	# listen [::]:443 ssl default_server;
	#
	# Note: You should disable gzip for SSL traffic.
	# See: https://bugs.debian.org/773332
	#
	# Read up on ssl_ciphers to ensure a secure configuration.
	# See: https://bugs.debian.org/765782
	#
	# Self signed certs generated by the ssl-cert package
	# Don't use them in a production server!
	#
	# include snippets/snakeoil.conf;

	root /home/ubuntu/Web/wangwang/dist;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name _;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}

	# pass PHP scripts to FastCGI server
	#
	#location ~ .php$ {
	#	include snippets/fastcgi-php.conf;
	#
	#	# With php-fpm (or other unix sockets):
	#	fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
	#	# With php-cgi (or other tcp sockets):
	#	fastcgi_pass 127.0.0.1:9000;
	#}

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


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#	listen 80;
#	listen [::]:80;
#
#	server_name example.com;
#
#	root /var/www/example.com;
#	index index.html;
#
#	location / {
#		try_files $uri $uri/ =404;
#	}
#}

设置行：root /home/ubuntu/Web/wangwang/dist; 即root后面改为项目路径即可。

1.5 重新加载配置文件

nginx -s reload

ps: 使用ubuntu命令时，命令前可能需要加sudo，来确保有足够的操作权限

2. vue项目打包

vue项目使用npm run build 命令打包，详细配置参考Vue CLI配置参考

这里需要特别说明的是：Vue设置路由History mode模式，打包 vue run build后页面不显示问题，404或者200但是空白页，一般开发的单页应用的URL都会带有#号的hash模式，因为业务需求，或者不想使用带#号，我们通常在路由index.js里面设置：

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

这样URL不再会有#号，在Dev开发阶段一切都是正常的，可是打包发布之后，访问项目路径：一片空白，js,css加载正常(虽然显示访问正常200，但是并没有加载js，css文件，而是首页)；这是因为你的项目打包dist并不是你服务器访问的跟目录，访问是http://xxx.xxx.com/dist，跟目录访问：http://xxx.xxx.com；由于包并不是根目录router路由无法找到路径中的组件，解决方法：
1.最简单的做法是在打包时注释掉mode、base。