连接服务器上的堆栈：Vue js 前端 + php api + postgres db

Question

我正在努力在服务器上设置/部署我的生产环境。我的前端映像是使用Dockerfile.static构建的

FROM nginx:1.17-alpine

LABEL maintainer="xxx"

COPY app/dist /usr/share/nginx/html

COPY ./conf.d/default.conf /etc/nginx/conf.d/default.conf

CMD ["nginx", "-g", "daemon off;"]

我的 nginx 配置文件

server {

    listen 80;

    server_name www.xxx.org;

    location / {

        root /usr/share/nginx/html;

        try_files $uri $uri/ /index.html;

        proxy_pass http://backend:9000/;

    }

}

字体服务是通过我的撰写文件中的此代码片段设置的

frontend:

    image: gitlab-registry.cern.ch/xxx/xxx/static:latest

    ports:

        - 80:80

    networks:

        - frontend

        - backend

当我在浏览器中输入域时，会提供静态文件。但我无法让我的后端连接继续。只收到 404。

这是我的 php API 的 Dockerfile：

FROM bitnami/php-fpm:latest

LABEL maintainer="xxx"

COPY . /var/www/html

WORKDIR /var/www/html/public

Api 类包含所有端点，并最终处理所有查询并从数据库获取数据。

问题 1) 从我的前端容器中获取的正确 URL 是什么？据我了解，容器是通过 docker 网络后端连接的。所以我尝试了http://backend:9000/ + uri_path ...

问题2）如何设置后端容器？因为我感觉自己好像失去了一些东西。需要提供 index.php 文件...我是否需要另一个 nginx 容器来将我的 php API 集成到该容器中？

问题 3）我的 nginx 配置正确还是我也缺少某些东西？

Answer 1

我认为对于那些没有部署经验的人来说，查看如何执行此操作的基本示例可能会很有用。所以，我想提供这样一个例子，以及如果我要改进我的解决方案，我的下一步将是什么。欢迎反馈！前端容器提供静态信息，您可以通过构建 vue js 项目获得这些静态信息Dockerfile.static 用于构建容器FROM nginx:1.17-alpineLABEL maintainer="xxx"# copy statics into default html folder of containerCOPY app/dist /usr/share/nginx/html# use specific config file for nginx COPY nginx_static.conf /etc/nginx/nginx.confCMD ["nginx", "-g", "daemon off;"]nginx 服务器的配置文件取自vue js 文档...我只需要为前端执行的 URL 请求添加代理传递，以便从数据库获取数据user  nginx;worker_processes  1;error_log  /var/log/nginx/error.log warn;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;  keepalive_timeout  65;  server {    listen       80;    server_name  www.xxx.org;    location / {      root   /usr/share/nginx/html;      index  index.html;      try_files $uri $uri/ /index.html;    }    location /sets {      proxy_pass http://backend:9000;    }    location /cards {      proxy_pass http://backend:9000;    }    location /types {      proxy_pass http://backend:9000;    }    location /supertypes {      proxy_pass http://backend:9000;    }    location /uploads {      proxy_pass http://backend:9000;    }    error_page   500 502 503 504  /50x.html;    location = /50x.html {      root   /usr/share/nginx/html;    }  }}http://backend:9000来自这样一个事实：我正在定义一个容器网络，在该网络中我的三个容器相互通信，称为后端，并且主机端口 9000 连接到后端容器的端口 9000（请参阅 docker-compose ）有了我的前端请求的所有这些代理传递，我的代码中发出的实际请求 URL 地址减少为“/”（在开发模式下，我将使用类似 http://localhost:8000/ 的内容）下一步我会将 SSL 配置添加到配置中后端/API该Dockerfile用于构建后端容器FROM php:7.4-cliLABEL maintainer="xxx"RUN apt-get update# install pgsql libary which is required in my caseRUN apt-get install -y libpq-dev \  && docker-php-ext-configure pgsql -with-pgsql=/usr/local/pgsql \  && docker-php-ext-install pdo pdo_pgsql pgsqlCOPY . /var/www/MTGWebWORKDIR /var/www/MTGWeb/public# start php development server which listens to port 9000CMD ["php", "-S", "0.0.0.0:9000"]使用开发服务器肯定不是最佳选择，但对于像我这样的小规模项目来说，这似乎是最简单的解决方案（下一步应该用另一个 nginx Web 服务器替换）D B我使用标准 postgres 映像来构建数据库容器。为了在后端和数据库容器之间建立数据库连接，您必须使用数据库服务的名称作为主机名（在我的例子中为mtg-db，正如您在 docker-compose 文件中看到的那样）部署我正在使用 gitlab-ci 来构建我的前端和后端图像。我的私有 ssh 密钥作为环境变量添加到我的存储库中，以便允许自动访问服务器。在我的主分支中推送某些内容后，将构建图像，将其拉到服务器上，然后再次设置所有内容stages:    - build-statics    - build-images    - deploy_stagingbuild-statics:    image: node:latest    stage: build-statics    script:        - cd app        - npm ci        - npm run build    artifacts:        paths:            - app/dist    only:        - masterbackend-image:    stage: build-images    tags:        - docker-image-build    script:        - ""    dependencies: []    variables:        TO: $CI_REGISTRY_IMAGE:latest        DOCKER_FILE: Dockerfile    only:        - masterstatic-image:    stage: build-images    tags:        - docker-image-build    script:        - ""    dependencies:        - build-statics    variables:        TO: $CI_REGISTRY_IMAGE/static:latest        DOCKER_FILE: Dockerfile.static    only:        - masterbefore_script:    - apt-get update    - apt-get -y install git    - 'which ssh-agent || ( apt-get install openssh-client )'    - eval $(ssh-agent -s)    - ssh-add <(echo "$SSH_PRIVATE_KEY")    - mkdir -p ~/.ssh    - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'deploy_staging:    image: ubuntu:latest    stage: deploy_staging    script:        - ssh [e-mail] "cd .. && cd var/www/mtg-web/ && docker pull gitlab-registry.cern.ch/xxx && docker pull gitlab-registry.cern.ch/xxx/static && docker-compose up -d"    only:        - master容器是使用以下撰写文件设置的：version: '3'services:    backend:        image: gitlab-registry.cern.ch/xxx:latest        ports:            - 9000:9000        volumes:            - /home/backend_logs:/var/www/MTGWeb/logs        networks:            - backend    frontend:        image: gitlab-registry.cern.ch/xxx/static:latest        ports:            - 80:80        networks:            - backend    mtg-db:        container_name: mtg-db        image: postgres:latest        env_file:            - database/database.env        ports:            - 5432:5432        volumes:            - /home/mtg_web_data:/var/lib/postgresql/data        networks:            - backendvolumes:    db_data:    backend_logs:networks:    backend:就这样吧！这是一个完整的示例，说明如何使用 vue js 等 js 前端框架、基于 php 的 API 和 postgres DB 在服务器上设置 3 个容器堆栈。