如何将 Laravel docker 容器和 MySQL DB 与 Vue 一起使用？

Question

我有一个应用程序，它使用Vue CLI 作为前端，使用Laravel 作为后端。现在我尝试使用 docker 在服务器上启动我的应用程序。

我的 docker 技能只能让我做一件事：Vue docker 容器。但就我必须使用 Laravel 作为后端而言，我也必须为此创建一个容器（当然还有 MySQL）。

这是我得到的：Dockerfile

FROM node:lts-alpine
WORKDIR /app
COPY package*.json ./
RUN  npm install
EXPOSE 8080
CMD ["npm", "run", "serve"]

docker-compose.yml

version: '3'
services:
    web:
        build: .
        stdin_open: true
        tty: true
        ports: 
            - "8080:8080"
        volumes:
            - "/app/node_modules" 
            - ".:/app"

问题是我了解如何将 Laravel 连接到Dockerfile。它只是在我看来不合逻辑。

也许我应该使用Ubuntu，而不仅仅是节点？无论如何，我再次请求您的支持

Answer 1

根据本文，您将需要执行以下步骤。

1. 让你的项目文件夹看起来像这样：（d:目录，f:文件）

d: backend
d: frontend
d: etc
    d: nginx
        d: conf.d
            f: default.conf.nginx
    d: php
        f: .gitignore
    d: dockerize
        d: backend
            f: Dockerfile
f: docker-compose.yml

2. 添加docker-compose.yml

    version: '3'
    services:
    www:
        image: nginx:alpine
        volumes:
            - ./etc/nginx/conf.d/default.conf.nginx:/etc/nginx/conf.d/default.conf
        ports:
            - 81:80
        depends_on:
            - backend
            - frontend

    frontend:
        image: node:current-alpine
        user: ${UID}:${UID}
        working_dir: /home/node/app
        volumes:
            - ./frontend:/home/node/app
        environment:
            NODE_ENV: development
        command: "npm run serve"

    backend:
        build:
            context: dockerize/backend
        # this way container interacts with host on behalf of current user.
        # !!! NOTE: $UID is a _shell_ variable, not an environment variable!
        # To make it available as a shell var, make sure you have this in your ~/.bashrc (./.zshrc etc):
        # export UID="$UID"
        user: ${UID}:${UID}

        volumes:
            - ./backend:/app
            # custom adjustments to php.ini
            # i. e. "xdebug.remote_host" to debug the dockerized app
            - ./etc/php:/usr/local/etc/php/local.conf.d/
        environment:
            # add our custom config files for the php to scan
            PHP_INI_SCAN_DIR: "/usr/local/etc/php/conf.d/:/usr/local/etc/php/local.conf.d/"
        command: "php artisan serve --host=0.0.0.0 --port=8080"

    mysql:
        image: mysql:5.7.22
        container_name: mysql
        restart: unless-stopped
        tty: true
        ports:
            - "4306:3306"
        volumes:
            - ./etc/mysql:/var/lib/mysql
        environment:
            MYSQL_DATABASE: tor
            MYSQL_USER: root
            MYSQL_PASSWORD: root
            MYSQL_ROOT_PASSWORD: root
            SERVICE_TAGS: dev
            SERVICE_NAME: mysql

3. 添加default.conf.nginx

    server {
        listen 81;
        server_name frontend;
        error_log  /var/log/nginx/error.log debug;

        location / {
            proxy_pass http://frontend:8080;
        }

        location /sockjs-node {
            proxy_pass http://frontend:8080;
            proxy_set_header Host $host;
            # below lines make ws://localhost/sockjs-node/... URLs work, enabling hot-reload
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
        }

        location /api/ {
            # on the backend side, the request URI will _NOT_ contain the /api prefix,
            # which is what we want for a pure-api project
            proxy_pass http://backend:8080/;
            proxy_set_header Host localhost;
        }
    }

4. 添加Dockerfile

FROM php:fpm-alpine

RUN apk add --no-cache $PHPIZE_DEPS oniguruma-dev libzip-dev curl-dev \
    && docker-php-ext-install pdo_mysql mbstring zip curl \
    && pecl install xdebug redis \
    && docker-php-ext-enable xdebug redis
RUN mkdir /app
VOLUME /app
WORKDIR /app

EXPOSE 8080
CMD php artisan serve --host=0.0.0.0 --port=8080

5. 不要忘记将vue.config.js添加到您的前端文件夹

// vue.config.js
module.exports = {
    // options...
    devServer: {
        disableHostCheck: true,
        host: 'localhost',
        headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
        },
        watchOptions: {
            poll: true
        },
        proxy: 'http://localhost/api',
    } 
}

6. 跑步sudo docker-compose up

7. 如果您想进行迁移，请运行以下命令：sudo docker-compose exec backend php artisan migrate

Answer 2

您将需要 4 个容器，在文件中定义docker-compose：

• 前端（您已经拥有的 Vue 应用程序）
• 后端（Laravel 应用程序）
• Web 服务器（例如 Nginx 或 Apache）
• 数据库（MySQL）

可以将“网络服务器”和“后端”容器合并为一个，但这通常是一个不好的建议。您的撰写文件将类似于以下内容：

version: '3'
services:
  frontend:
    build: ./frontend
    ports: 
      - 8080:8080
    volumes:
      - ./frontend:/app

  backend:
    build: ./backend
    volumes:
      - ./backend:/var/www/my_app
    environment:
      DB_HOST=db
      DB_PORT=3306

  webserver:
    image: nginx:alpine
    ports:
      - 8000:8000
    volumes:
      - ./backend:/var/www/my_app

  database:
    image: mariadb:latest
    container_name: db
    ports:
      - 3306:3306
    environment:
      MYSQL_DATABASE: dbname
      MYSQL_ROOT_PASSWORD: dbpass
    volumes:
      - ./sql:/var/lib/mysql

其中./backend包含 Laravel 应用程序代码，./frontend包含 Vue 应用程序，并且都包含Dockerfile. 有关所需的每个映像的具体说明，请参阅Docker Hub 。这会向您的主机系统公开 3 个端口：8080（Vue 应用程序）、8000（Laravel 应用程序）和3306（MySQL）。

或者，如果您在 Laravel 容器中使用 artisan cli 的命令，则可以省略 Web 服务器serve，类似于您在DockerfileVue 应用程序中已经执行的操作。

该图像必须包含类似的内容CMD php artisan serve --host=0.0.0.0 --port=8000