vuecli3项目部署到阿里云Ubuntu 16.04系统nginx最新版本静态服务器上

1.第一个坑就是要通过FileZilla、FlashFxp5等软件上传本地电脑的文件到阿里云服务器，但是在通过软件连接阿里云的时候不管通过什么方式都连接不上，一直出现连接超过20S,连接超时的问题，阿里云配置没有问题，通过网址可以正常访问，最后找到问题是因为我所用的网络过滤掉了一些端口（具体原因不太知道），然后网络换成手机热点成功解决上述问题。

2.购买并注册阿里云账号，我在阿里云上安装的是Ubuntu 系统。

3.在Ubuntu系统上在线安装nginx(1.14.0)静态文件服务器,在管理终端依次输入下面的命令就可以成功安装。

• sudo su root          获得管理员权限
• sudo apt-get update       更新Ubuntu 系统下载工具
• apt-get install nginx         在线安装nginx
• $ sudo /etc/init.d/nginx start    启动nginx服务器

4.就可以通过输入网址在浏览器看到nginx的欢迎界面了

5.然后就是修改nginx的配置文件，下面是我写好的配置文件（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/*;


	
	server {
        listen       8080 default_server;
        listen       [::]:8080 default_server;
        server_name  _;

        include /etc/nginx/default.d/*.conf;

        location / {
  	try_files $uri $uri/ /index.html;
	   root /data/www/dist/;
           index index.html;
	}

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.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;
#	}
#}

修改好配置文件 在管理终端输入 nginx -s reload使得配置生效 

6.在上面的配置文件中主要看下面的配置

其中标号 1 的地方是配置的端口 当我们在浏览器访问的时候要输入的，比如上面配置的是8080，在浏览器地址栏就应该输入http://网址:8080这样才能够访问

标号2的地方是放置静态资源的地方 root    /data/www/dist/  要在服务器的根目录新建 data/www文件目录

 

然后把vuecli打包的dist文件夹放到 /data/www目录下就可以了

7.最后在浏览器输入网址:8080就可以访问了，如果上面配置的端口不是8080，在地址栏输入的时候要做相关修改 

 

 

最后附带怎样在阿里云上关闭nginx静态文件服务器

 输入第一条命令查看进程

输入第二条命令就可以kill进程了

 

附加：