前一章我們已經將我們的後台前端頁面給打包好了，那麼我們該如何將這個打包好的頁面給架設起來呢？這時候就要提到 web server 了。

網頁伺服器(Web server)

一般提到網頁伺服器，大多數的狀況都會提到nginx及apache這兩種，由於nginx在處理併發上更為有優勢，所以我們這裡是選用了nginx來部屬我們的網頁服務，首先我們一樣先用docekr來將我們的nginx服務給起起來。

檔案配置

首先我們一樣在跟目錄下建置下列的資料夾：

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

    client_max_body_size 10m;
}

develop.conf

# develop nginx configuration

server {
    listen       3001;
    server_name  127.0.0.1;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html/admin;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

然後將上一章裡面dist裡面資料置入html/admin裡面，接下來就來重新添加我們的docker-compose 配置。

docker compose 新增內容

volumes的部分即對應到剛剛那三個檔案

    test_nginx:
        image: nginx:1.23.1-alpine
        container_name: test_nginx
        restart: always
        ports:
            - '3001:3001'
        volumes:
            - '.nginx/html/:/usr/share/nginx/html'
            - '.nginx/config/develop.conf:/etc/nginx/conf.d/default.conf'
            - '.nginx/config/nginx.conf:/etc/nginx/nginx.conf'
        networks:
            net:
                ipv4_address: 172.23.0.23

接著docker-compose up -d --build之後，便可以透過剛剛設定好的port看到我們打包好的頁面囉