每日分享- Docker 空間和 Nginx 如何部署單頁應用

方法一：使用 Nginx 部署

1 在伺服器上安裝 Nginx，并建立一個名為 myapp 的目錄，用于存放靜态資源。

sudo apt-get update
sudo apt-get install nginx
sudo mkdir /var/www/myapp

           

2 将單頁應用的建構産物（通常是一個 index.html 檔案和一些靜态資源檔案，如 CSS 和 JS）複制到 myapp 目錄下。

sudo cp -r /path/to/build/* /var/www/myapp/

           

3 配置 Nginx，使其将請求轉發到 myapp 目錄下的 index.html 檔案。可以在 /etc/nginx/sites-available/default 檔案中添加以下配置：

server {
  listen 80;
  root /var/www/myapp;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

           

4 重新開機 Nginx 服務, 然後可以通過浏覽器通路單頁應用了。

sudo systemctl restart nginx

           

方法二：使用 Docker 部署

1 在本地建構一個 Docker 鏡像，該鏡像包含單頁應用的建構産物。

FROM nginx:latest
COPY ./build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

           

2 使用以下指令将 Docker 鏡像推送到 Docker Hub。

docker build -t myapp .
docker tag myapp username/myapp
docker push username/myapp

           

3 在伺服器上拉取 Docker 鏡像，并建立一個名為 myapp 的容器, 然後可以通過浏覽器通路單頁應用了。

docker pull username/myapp
docker run -d --name myapp -p 80:80 username/myapp

           

可能出現的問題以及對應的解決方法：

1 跨域問題：如果單頁應用需要與後端 API 互動，可能會出現跨域問題。可以在 Nginx 配置檔案中添加以下配置，以解決跨域問題。

location /api {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Credentials' 'true';
  proxy_pass http://backend-server:port;
}

           

2 SSL 證書問題：如果需要使用 HTTPS 協定通路單頁應用，需要為 Nginx 配置 SSL 證書。可以使用 Let's Encrypt 等免費 SSL 證書頒發機構提供的工具自動生成 SSL 證書，并在 Nginx 配置檔案中添加以下配置。

server {
  listen 80;
  server_name example.com;
  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl;
  server_name example.com;
  ssl_certificate /path/to/fullchain.pem;
  ssl_certificate_key /path/to/privkey.pem;
  root /var/www/myapp;
  index index.html;
  location / {
  try_files $uri $uri/ /index.html;
}
}

           

3 容器無法通路主機上的資源：如果單頁應用需要通路主機上的資源，例如資料庫或其他服務，容器可能無法通路這些資源。可以使用 Docker 的網絡配置功能，将容器與主機上的網絡連接配接起來，以解決該問題。

docker run -d --name myapp --net=host -p 80:80 username/myapp           

4 鏡像過大：如果單頁應用的建構産物過大，将其打包到 Docker 鏡像中可能會導緻鏡像過大，進而增加部署時間和存儲空間。可以使用多階段建構等技術，将建構産物與 Nginx 伺服器分離，進而減小鏡像大小。

FROM node:latest as builder
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

FROM nginx:latest
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

           

5 網絡延遲和帶寬問題：如果單頁應用需要加載大量的靜态資源檔案，可能會導緻使用者通路速度變慢。可以使用 CDN 或者使用 Nginx 提供的 gzip 壓縮技術，減小靜态資源檔案的大小，進而提高使用者通路速度。

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

           

6 安全問題：如果單頁應用需要使用者登入等操作，需要確定使用者的敏感資訊得到保護。可以使用 HTTPS 協定、設定 CSRF 令牌等方式，提高應用程式的安全性。

location /api {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';
  if ($request_method = 'OPTIONS') {
    return 204;
  }
  proxy_pass http://backend-server:port;
}

           

部署單頁應用可以采用 Nginx 或 Docker 技術，不同的方式有不同的優缺點和适用場景，具體使用時需要結合實際情況進行選擇。同時，需要注意可能出現的問題，及時進行解決，以保證應用程式的正常運作。