首頁企業(yè)服務(wù)使用 Nginx 搭建靜態(tài)網(wǎng)頁服務(wù)使用 Nginx 搭建靜態(tài)網(wǎng)頁服務(wù)

使用 Nginx 搭建靜態(tài)網(wǎng)頁服務(wù)

使用搭建靜態(tài)網(wǎng)頁服務(wù)本身是一件非常簡單的事，但是我之前在 CSDN 找了幾篇教程，弄了一下午也沒弄好（不愧是屎山淘金），學(xué)了一段時間后端和后，我大概只用了五分鐘就弄好了，這里寫一篇文章來幫助一下小白。

閱讀須知

在閱讀本文章前，你需要準備以下內(nèi)容

掌握基礎(chǔ)的命令行操作（本文章將介紹如何在服務(wù)器上部署靜態(tài)網(wǎng)頁，需要進行終端操作，因此你必須掌握命令行的使用。如果你打算使用，請查閱其他文章。）擁有一臺服務(wù)器（可以購買 VPS 也可以使用虛擬機本文章以 VPS 為例，并購置了域名（域名非必須））擁有一個靜態(tài)網(wǎng)站的源碼（如果僅僅作為學(xué)習(xí)目的，你可以寫一個簡單的 HTML 文件，這里以使用 hexo 生成的靜態(tài)網(wǎng)站為例。）知道是什么，有什么用（不需要掌握）

不同發(fā)行版下命令會有所區(qū)別，本文章以 .04 為例

準備服務(wù)器

如果你已經(jīng)有了一臺服務(wù)器并安裝好了，你可以直接跳過這一部分，但是如果你的服務(wù)器是新的，沒有經(jīng)過任何配置，請參閱以下內(nèi)容進行配置。

升級系統(tǒng)

sudo apt update && sudo apt upgrade

安裝

sudo apt install nginx

啟動

sudo systemctl start nginx
# 開機自動啟動
sudo systemctl enable nginx

測試服務(wù)

直接在瀏覽器訪問你服務(wù)器的 ip，如果你部署了 DNS 服務(wù)的話，你也可以直接使用域名。如果哦看到的歡迎界面，服務(wù)器準備成功！

將網(wǎng)站源碼發(fā)送到服務(wù)器

這一步可以有很多的選擇，你可以通過來，也可以直接使用一些 ftp 工具。這里演示使用 tar 打包并使用 scp 上傳。

打包壓縮源文件

當然，你可以使用其他指令打包壓縮或者不壓縮，這里使用 xz 壓縮以節(jié)省網(wǎng)絡(luò)流量。

tar -Jcv -f site.tar.xz public/

將壓縮包上傳到服務(wù)器

scp site.tar.xz root@test.aimerneige.com:~/

在服務(wù)器解壓壓縮包

通常，我們會將靜態(tài)網(wǎng)站的源文件放置在 /var/www/ 這個目錄下，但是你也可以放置在家目錄或其他你喜歡的位置下。

tar -Jxv -f site.tar.xz -C ./
sudo mv public/ /var/www/blog

配置

本文章并不會介紹如何使用，并且閱讀本文章并不需要掌握，你只需要了解有什么用即可。因為如果只是部署一個簡單的靜態(tài)網(wǎng)頁，只需要簡單修改默認配置即可。如果你想了解更多關(guān)于的內(nèi)容請查閱其他文章。

修改配置

直接使用 vim 修改默認的配置文件即可。如果你沒有安裝 vim ，執(zhí)行 sudo apt vim 來安裝它，當然你也可以使用自己喜歡的編輯器。

sudo vim /etc/nginx/sites-available/default

找到這一行：

    root /var/www/html;

修改為源文件所在目錄：

    root /var/www/blog;

如果你需要配置域名，找到這一行：

    server_name _;

將 _ 修改為你的域名。

檢查配置是否正確

sudo nginx -t

如果得到類似如下的輸出，則證明配置文件沒有錯誤。

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

如果你的配置文件出現(xiàn)了問題，請重新修改。

重啟

sudo nginx -s reload

檢查站點

重新訪問你的服務(wù)器 ip 或域名，檢查服務(wù)是否成功部署。

后記為什么的配置文件要這樣改

的默認配置文件位于 /etc// 目錄下，主配置文件為 .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 TLSv1.3; # 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/*;
}


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

去掉全部的注釋

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
}

http {

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    gzip on;

    xml application/xml application/xml+rss text/javascript;

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

默認的服務(wù)為什么可以跑呢？注意這一行：

    include /etc/nginx/sites-enabled/*;

切換到 /etc//-/ 目錄下，并查看文件

cd /etc/nginx/sites-enabled/
ls

我們會發(fā)現(xiàn)只有一個文件

查看它的內(nèi)容：

##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# https://www.nginx.com/resources/wiki/start/
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/
# https://wiki.debian.org/Nginx/DirectoryStructure
#
# In most cases, administrators will remove this file from sites-enabled/ and
# leave it as reference inside of sites-available where it will continue to be
# updated by the nginx packaging team.
#
# This file will automatically load configuration files provided by other
# applications, such as Drupal or Wordpress. These applications will be made
# available underneath a path with that package name, such as /drupal8.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

# Default server configuration
#
server {
    listen 80 default_server;
    listen [::]:80 default_server;

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;
    # index test.json;

    server_name _;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }

    # pass PHP scripts to FastCGI server
    #
    #location ~ \.php$ {
    #    include snippets/fastcgi-php.conf;
    #
    #    # With php-fpm (or other unix sockets):
    #    fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    #    # With php-cgi (or other tcp sockets):
    #    fastcgi_pass 127.0.0.1:9000;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny all;
    #}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#    listen 80;
#    listen [::]:80;
#
#    server_name example.com;
#
#    root /var/www/example.com;
#    index index.html;
#
#    location / {
#        try_files $uri $uri/ =404;
#    }
#}

去掉注釋：

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ =404;
    }
}

我相信哪怕沒有學(xué)習(xí)過應(yīng)該也能理解部分含義。

接下來我們看一下 /var/www/html 這個目錄

cd /var/www/html
ls

只有一個 .-.html 文件，正是歡迎界面的源代碼。


<html>
<head>
<title>Welcome to nginx!title>
<style>
    body {
        width: 48em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
style>
head>
<body>
<h1>Welcome to Nginx!h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.orga>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.coma>.p>

<p><em>Thank you for using nginx.em>p>
body>
html>

回到 /etc//-/ 目錄下，我想你應(yīng)該明白應(yīng)該修改什么了吧。

server {
    listen 80;

    server_name example.com;

    location / {
        proxy_pass http://localhost:3000/;
    }
}

使用 Nginx 搭建靜態(tài)網(wǎng)頁服務(wù)

相關(guān)作文

小學(xué)作文

初中作文

高中作文

作文體裁