连接服务器上的堆栈：Vue JS前端+ PHP API + Postgres数据库

如何解决连接服务器上的堆栈：Vue JS前端+ PHP API + Postgres数据库

我正在努力在服务器上设置/部署生产环境。我的前端映像是使用 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/;
    }
}

fontend服务是通过此片段从我的撰写文件中设置的

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

以及完整的撰写文件：

version: '3'
services:
    backend:
        image: gitlab-registry.cern.ch/xxx/xxx:latest
        expose:
            - 9000
        networks:
            - backend

    frontend:
        image: gitlab-registry.cern.ch/xxx/xxx/static:latest
        ports:
            - 80:80
        networks:
            - frontend
            - backend


    mtg-db:
        container_name: mtg-db
        image: postgres:latest
        env_file:
            - database/database.env
        ports:
            - 5432:5432
        volumes:
             - db_data:/var/lib/postgresql/data
        networks:
            - backend

 volumes:
     db_data:
         driver: local
         driver_opts:
             o: bind
             type: none
             device: home/mtg_web_data/

networks:
    frontend:
    backend:

在我的后端容器中，我有一个需要提供服务的index.php文件。在我的开发环境中，我仅使用了php开发服务器，该文件的内容如下所示：

<?php


require $_SERVER['DOCUMENT_ROOT']."/../src/api.php";

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: GET,POST");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type,Access-Control-Allow-Headers,Authorization,X-Requested-With");

$url = parse_url($_SERVER['REQUEST_URI']);

if (!isset($url["query"])) {
    $url["query"] = NULL;
}

$API = new Api($_SERVER["REQUEST_METHOD"],$url["path"],$url["query"]);
$API->processRequest();

?>

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

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

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

问题3）我的nginx配置是否正确，或者我在那里也缺少什么？

解决方法

我认为，对于那些没有部署经验的人来说，查看如何执行此操作的基本示例可能会很有用。因此，我想提供这样一个示例，以及如果我要改进解决方案，下一步将是什么。欢迎反馈！

前端容器

提供通过构建vue js项目获得的静态信息
Dockerfile.static用于构建容器

FROM nginx:1.17-alpine
LABEL maintainer="xxx"
# copy statics into default html folder of container
COPY app/dist /usr/share/nginx/html
# use specific config file for nginx 
COPY nginx_static.conf /etc/nginx/nginx.conf
CMD ["nginx","-g","daemon off;"]

nginx服务器的

配置文件取自vue js doc ... ...我只需要为前端请求执行的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 来自以下事实：我定义了一个容器网络，其中我的三个容器相互通信，称为 backend 并且主机端口9000连接到后端容器的端口9000（请参阅docker-compose）
对我的前端请求具有所有这些代理传递，在我的代码中创建的实际请求url地址减少为“ /”（在开发模式下，我将使用类似http：// localhost：8000 /的地址）
下一步，我将SSL配置添加到配置（as described here）

后端/ API

此Dockerfile用于构建后端容器

FROM php:7.4-cli
LABEL maintainer="xxx"
RUN apt-get update
# install pgsql libary which is required in my case
RUN apt-get install -y libpq-dev \
  && docker-php-ext-configure pgsql -with-pgsql=/usr/local/pgsql \
  && docker-php-ext-install pdo pdo_pgsql pgsql
COPY . /var/www/MTGWeb
WORKDIR /var/www/MTGWeb/public
# start php development server which listens to port 9000
CMD ["php","-S","0.0.0.0:9000"]

使用开发服务器肯定不是最佳选择，但是对于像我这样的小规模项目来说，这似乎是最简单的解决方案（下一步，应将其替换为另一台nginx Web服务器）

DB

我正在使用标准的postgres映像来构建数据库容器。为了在后端和数据库容器之间建立数据库连接，您必须使用数据库服务的名称作为主机名（在我的例子中是 mtg-db ，如您在docker-compose中看到的那样）文件）

部署

我正在使用gitlab-ci构建前端和后端映像。我的ssh私钥作为环境变量添加到我的仓库中，以允许自动访问服务器。在我的master分支中推送某些内容后，将生成图像，将其拉到服务器上，然后再次设置一切

stages:
    - build-statics
    - build-images
    - deploy_staging

build-statics:
    image: node:latest
    stage: build-statics
    script:
        - cd app
        - npm ci
        - npm run build
    artifacts:
        paths:
            - app/dist
    only:
        - master

backend-image:
    stage: build-images
    tags:
        - docker-image-build
    script:
        - ""
    dependencies: []
    variables:
        TO: $CI_REGISTRY_IMAGE:latest
        DOCKER_FILE: Dockerfile
    only:
        - master

static-image:
    stage: build-images
    tags:
        - docker-image-build
    script:
        - ""
    dependencies:
        - build-statics
    variables:
        TO: $CI_REGISTRY_IMAGE/static:latest
        DOCKER_FILE: Dockerfile.static
    only:
        - master

before_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 root@xxx.net "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:
            - backend

volumes:
    db_data:
    backend_logs:

networks:
    backend:

到这里开始！完整的工作示例，说明如何使用js前端框架（例如vue js，基于php的API和postgres DB）在服务器上设置3个容器堆栈。

连接服务器上的堆栈：Vue JS前端+ PHP API + Postgres数据库

如何解决连接服务器上的堆栈：Vue JS前端+ PHP API + Postgres数据库

解决方法

前端容器

后端/ API

DB

部署

相关推荐