在Ubuntu16上部署Vue.js前端应用程序

一、概述

现在流行用Vue.js前端框架开发前端应用网站，刚好在公司完成一个内部使用的网站，现将部署方法分享出来。

二、开发环境

系统：win7
IDE：Webstorm2019.2
Node.js：v10.16.2

三、网站开发

首先，我们要开发好网站的各个功能，在本地能够运行起来，打开浏览器可以看到效果：http://localhost:32000， 如下图示：

四、打包

在工程根目录下执行如下命令：

 node build/build.js

执行成功后，会在当前目录生成一个名为dist的文件夹，该文件夹包含一个static文件夹和一个index.html文件。

五、安装部署环境

• 使用VMware或者VirtualBox创建一个Ubuntu（16.0.4, 64位）的虚拟机，创建过程略。
• 虚拟机网络配置，使用桥接模式。
• 安装nginx

apt-get install nginx  

• 将步骤四生成的dist文件夹中的文件拷贝到如下目录：

/usr/share/nginx/html/

• 配置nginx
  打开/etc/nginx/nginx.conf文件

vim /etc/nginx/nginx.conf

在nginx.conf中配置如下：

user www-data;
worker_processes auto;
pid /run/nginx.pid;

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_disable "msie6";

	# 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/*;
    
        server {
           listen 32000; 
           server_name localhost;
           location / {
                   }
           root /usr/share/nginx/html;
           index index.html;
         }

}


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

其中，主要是添加以下内容，其余使用默认即可：

  server {
           listen 32000; 
           server_name localhost;
           location / {
                   }
           root /usr/share/nginx/html;
           index index.html;
         }

32000： 是监听端口，可自定义；
root /usr/share/nginx/html：表示前端程序静态文件所在目录；
index.html：启动页面。

• 如果前端程序中有请求后端接口，可能需要作跨域处理。

六、启动前端程序

• 启动应用
  启动nginx服务即可访问前端程序，执行如下命令：

service nginx start 

• 查看效果
  在浏览器输入：

http://IP:32000/index.html 

其中，IP为Ubuntu虚拟机的ip。
效果如下图示：

• 关闭应用
  停止nginx服务即可，执行如下命令：

service nginx stop

七、总结

本文仅介绍了nginx部署前端应用的方法，还有很多种部署方法，后续再实践。如果是在同一个服务器上部署多个前端应用，需要作一些处理。主要步骤：

• 新建不同的文件夹，用来存放每个程序的安装文件
• 修改nginx.conf
  为每个程序增加对应的：

  server {
           listen 32000;    
           server_name localhost;
           location / {
                   }
           root /usr/share/nginx/html;
           index index.html;
         }

针对不同应用修改端口和root路径。
启动nginx，就可以访问所有的应用。