关于前端:ubuntu160下载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 文件

间接将文件拖到本人的电脑当中，用记事本关上批改。

在该文件的最初增加了如下代码：

server {
    listen 8360;  // 服务器凋谢的端口
    server_name 39.102.52.215;  // 我的项目拜访的地址或者域名

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

将我的项目打包上传到服务器

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

拜访 http://39.102.52.215:8360/ 就能够看到本人部署的页面了