如何將 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而不僅僅是node ？ 無論如何，我再次請求您的支持

Answer 1

您將需要 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 的serve命令，則可以省略 Web 服務器，類似於您已經在Dockerfile為 Vue 應用程序執行的操作。

圖像必須包含類似CMD php artisan serve --host=0.0.0.0 --port=8000

Answer 2

根據本文，您需要按照以下步驟操作。

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