ubuntu16.0下载nginx，并部署前端页面

一、nginx安装

在安装nginx之前需要先安装：
1、安装gcc g++的依赖库

apt-get install build-essential
apt-get install libtool

2、安装pcre依赖库

sudo apt-get update
sudo apt-get install libpcre3 libpcre3-dev

3、安装zlib依赖库

apt-get install zlib1g-dev

4、安装ssl依赖库

apt-get install openssl

为什么要安装这些包可以参考 Nginx在linux上安装之前的准备工作

安装nginx
使用 sudo apt-get install nginx 命令下载nginx就可以了，当然也可以下载安装包安装nginx，这里就不介绍了。

二、部署前端页面

配置nginx配置文件
在/etc/nginx目录下找到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/*;
}


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

其中

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

这两句代码是引入了默认的配置文件，分别指 /etc/nginx/conf.d 目录下的所有以 .conf 结尾的配置文件；/etc/nginx/sites-enabled/ 目录下的所有文件。

本文修改nginx配置文件是修改的 /etc/nginx/sites-enabled/default 文件，如果登录系统的用户权限不够，可以将配置文件夹，先放到 /home 目录下的用户文件夹里面，再使用 sudo mv 指令，将配置文件移动到nginx配置文件的位置。

直接将文件拖到自己的电脑当中，用记事本打开修改。

在该文件的最后添加了如下代码：

server {
    listen 8360;  # 服务器开放的端口
    server_name 39.102.52.215;  # 项目访问的地址或者域名

    location / {
        root /my_blog/;  # 项目所在的文件夹
        index index.html;  # 项目所在文件夹里面的入口文件
    }
}

配置文件修改完成之后，运行下面三条指令

sudo /usr/sbin/nginx -t # 检查配置是否正确

sudo /usr/sbin/nginx  # 启动服务

sudo /usr/sbin/nginx -s reload # 重新载入配置

将项目打包上传到服务器

在服务器的根目录创建 my_blog 文件夹用于存放打包后的项目，再将打包后的 dist 文件夹里的内容复制到 my_blog 文件当中(本文的前端项目是用umi框架来写的，所以打包后的文件在dist当中)。

这里访问 http://39.102.52.215:8360/ 就可以看到部署的页面了