每日分享- 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 技术，不同的方式有不同的优缺点和适用场景，具体使用时需要结合实际情况进行选择。同时，需要注意可能出现的问题，及时进行解决，以保证应用程序的正常运行。