nginx 部署静态网页

103 篇文章 1 订阅
80 篇文章 2 订阅

nginx 部署静态网页

2018年06月15日 17:55:23 幽默的荆轲君 阅读数:477

 

 

如果有一大堆的资源文件(javascript,html,css),如何请求html可以正确的加载css和JavaScript? 今天上午遇到了这个问题,这里记录一下。

nginx 部署静态网页

第一步,就是安装nginx.

这个真的是让我走了不少的弯路。。。我的电脑是ubuntu17.10.因为没有做足充分的调查。我选择了这个教程。 写的很是详细了,但是我电脑ubuntu版本太高,再加上教程里链接里面的很多文章不存在了。导致我费了好大一番功夫,也没装上。文章最后我会写一下CentOS该如何安装nginx. CentOS系统的可以直接找最后。 
nginx 安装方式非常简单。

sudo apt install nginx 
  • 1

第二步 配置nginx.conf

这个文件的路径是在 /etc/nginx/nginx.conf 打开terminal

熟悉vim的用这个指令

vim /etc/nginx/nginx.conf
  • 1

不熟悉的用这个指令

gedit /etc/nginx/nginx.conf
  • 1

第三步 打开之后的配置

我们可以找到http{} 这样内容的,例如

http {
        ##
        # Basic Settings
        ##

        ... 此处省略通用默认配置

        ##
        # Logging Settings
        ##
        ... 此处省略通用默认配置

        ##
        # Gzip Settings
        ##

        ... 此处省略通用默认配置

        ##
        # nginx-naxsi config
        ##

        ... 此处省略通用默认配置

        ##
        # nginx-passenger config
        ##

        ... 此处省略通用默认配置

        ##
        # Virtual Host Configs
        ##

        ... 此处省略通用默认配置

        # 此时,在此添加 server 上下文,开始配置一个域名,一个 server 配置段一般对应一个域名
        ###########################把你的代码加在这里###################################
         server {
        client_max_body_size 4G;
        listen  0.0.0.0:8888;  ## listen for ipv4;this line is default and implied
        server_name localhost;
        root /home/guo/XXX/;
        location / {
            auth_basic   "Restricted";
            auth_basic_user_file /usr/local/etc/nginx/pass_file;
            autoindex on;
            autoindex_exact_size on;
            autoindex_localtime on;
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

如果你的静态文件位于/home/guo/XXX/ ,就在http括号里面###的位置,加上上面的代码。 
注意,把上面的root改成 你的静态文件路径!!! 
执行

sudo service nginx restart
sudo nginx -s reload
  • 1
  • 2

你就可以在浏览器里面访问127.0.0.1:8000/static/xx.html(static是XXX下的文件)了。

centos下nginx的安装。

我先解释一下,ubuntu 17.10为什么不行。因为ubuntu17.10里面gcc版本已经是gcc7了。这样nginx就会出bug.需要自己加个补丁。或者可以安装gcc5版本的。我这里列一下安装流程(这里安装路径都是可行的,如果有问题,望留言告诉我)。

    正式开始前,编译环境gcc g++ 开发库之类的需要提前装好,这里默认你已经装好。
    sudo apt install build-essential
    sudo apt install libtool
    选定源码路径
    cd /usr/local/src # 这里最好用root来装,否则会有各种各样的权限问题。
    #### 安装pcre
    wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.42.tar.gz
    tar -zxvf pcre-8.42.tar.gz
    cd pcre-8.42
    ./configure
    make
    make install
    #### 安装zlib库
    cd /usr/local/src
    wget http://zlib.net/zlib-1.2.11.tar.gz
    tar -zxvf zlib-1.2.11.tar.gz
    cd zlib-1.2.11
    ./configure
    make
    make install
    #### 安装ssl
    cd /usr/local/src
    wget https://www.openssl.org/source/openssl-1.0.1t.tar.gz
    tar -zxvf openssl-1.0.1t.tar.gz
    #### 安装nginx

    cd /usr/local/src
    wget http://nginx.org/download/nginx-1.9.9.tar.gz
    tar -zxvf nginx-1.9.9.tar.gz
    cd nginx-1.9.9
    sudo ./configure --sbin-path=/usr/local/nginx/nginx \\n--conf-path=/usr/local/nginx/nginx.conf \\n--pid-path=/usr/local/nginx/nginx.pid \\n--with-http_ssl_module \\n--with-pcre=../pcre-8.42 \\n--with-zlib=../zlib-1.2.11 \\n--with-openssl=../openssl-1.0.1t
    make
    make install
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

到这里如果没有报错,说明nginx已经安装成功了。 
如果报错,参考这个修改 https://trac.nginx.org/nginx/ticket/1259

参考: 
https://showzeng.itscoder.com/nginx/2016/10/03/use-nginx-to-deploy-static-pages-easily.html 
http://www.nginx.cn/install 
https://blog.csdn.net/dutsoft/article/details/55004064

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AI周红伟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值