nginx 部署静态网页

时间:2022-08-24 21:46:17

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

nginx 部署静态网页

第一步,就是安装nginx.

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

sudo apt install nginx 

第二步 配置nginx.conf

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

熟悉vim的用这个指令

vim /etc/nginx/nginx.conf

不熟悉的用这个指令

gedit /etc/nginx/nginx.conf

第三步 打开之后的配置

我们可以找到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;
        }
    }
}

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

sudo service nginx restart
sudo nginx -s reload

你就可以在浏览器里面访问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

到这里如果没有报错,说明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