使用Docker构建Laravel和Angular环境！

2 年 ago
雅, 悟
4 minutes

总述

我打算使用Docker构建Laravel和Angular的环境。

GitHub -> GitHub 仓库

构成

.
├── back
├── docker
│   ├── mysql
│   ├── ├── Dockerfile
│   │   └── my.cnf
│   ├── nginx
│   │   └── default.conf
│   └── php
│       ├── Dockerfile
│       └── php.ini
├── docker-compose.yml
└── front

环境

    • node:16.6.2

 

    • php:8.0.9

 

    • Angular:12.2.1

 

    Laravel:8.55.0

※ 如果没有指定版本，Angular和Laravel可能会安装比上述版本更高的版本，这取决于时间。

步驟

1. 搭建Docker环境

1-1. 创建docker-compose文件

这次我们将准备四个容器，包括node、php、nginx和mysql。

version: '3.9'

services:
  node:
    image: node:16.6.2
    working_dir: /projects
    ports:
      - 4200:4200
    volumes:
      - ./front:/projects:cached
    tty: true
#    command: bash -c "
#      npm cache clean -f;
#      npm install;
#      cp -f src/environments/environment.develop.ts src/environments/environment.ts;
#      npm link @angular/cli && export PATH='$HOME/.npm-global/bin:$PATH';
#      npm start;
#      "

  php:
    build: ./docker/php
    volumes:
      - ./back:/var/www:cached
#    command: -c "
#      cp -f .env.develop .env;
#      composer install;
#      php artisan config:cache && php artisan config:clear;
#      "

  nginx:
    image: nginx
    ports:
      - 8080:80
    volumes:
      - ./back:/var/www:cached
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:cached
    depends_on:
      - php

  mysql:
    build: ./docker/mysql
    container_name: mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: sample
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    restart: on-failure
    volumes:
      - mysqldb:/var/lib/mysql:cached
    ports:
      - 3306:3306

volumes:
  mysqldb:

请注意，直到完成angular的安装之前，请将command：bash -c “npm cache clean -f && npm install && npm start”注释掉。

1-2. 创建各容器的配置文件

MySQL容器

Dockerfile 生成文件
FROM mysql:8
COPY my.cnf /etc/mysql/conf.d/
RUN chmod 644 /etc/mysql/conf.d/my.cnf
我的.cnf
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

[client]
default-character-set=utf8mb4

nginx容器

默认.conf
server {
    listen 80;
    server_name example.com;
    root /var/www/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass php:9000;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

PHP容器

Dockerfile – Docker文件
FROM php:8.0.9-fpm

COPY php.ini /usr/local/etc/php/

RUN apt-get update \
    && apt-get install -y zlib1g-dev libzip-dev mariadb-client libpng-dev unzip
RUN docker-php-ext-install zip pdo_mysql gd

#Composer install
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

WORKDIR /var/www

RUN composer global require "laravel/installer"
php.ini
zend.exception_ignore_args = off
expose_php = on
max_execution_time = 30
max_input_vars = 1000
upload_max_filesize = 64M
post_max_size = 128M
memory_limit = 256M
error_reporting = E_ALL
display_errors = on
display_startup_errors = on
log_errors = on
error_log = /dev/stderr
default_charset = UTF-8

[Date]
date.timezone = Asia/Tokyo

[mysqlnd]
mysqlnd.collect_memory_statistics = on

[Assertion]
zend.assertions = 1

[mbstring]
mbstring.language = Japanese

2. 启动Docker

docker-compose up -d

创建一个Angular项目

检查node容器。

docker-compose exec node bash

安装Angular

npm install -g @angular/cli

创建项目

创建项目命令

如果要创建一个名为Sample的项目，请按照以下方式进行：
※由于想在front目录中创建一个Angular项目，所以添加了选项–directory ./。

ng new sample --directory ./

执行上述命令时会提示两个问题。

第一个问题

Would you like to add Angular routing?

在问到是否要在Angular中使用routing功能的问题时，需要用Yes或No来回答。
除非一个页面可以完成所有操作，否则不会选择No，基本上应该是Yes。

第二个问题

Which stylesheet format would you like to use?

让我们选择自己想要使用的样式表格式。
我认为scss很常见呢。

编辑package.json

为了在Node容器中运行Angular服务器，您可以按照以下方式编辑package.json文件。

"start": "ng serve",
↓
"start": "ng serve --host 0.0.0.0 --poll",

启动Angular服务器

npm start

Angular页面的验证

スクリーンショット 2021-08-18 18.19.34.png

创建Laravel项目。

在php容器中进行检查。

docker-compose exec php bash

创建项目

使用以下命令在back目录下创建新的Laravel项目。

composer create-project --prefer-dist laravel/laravel ./

确认Laravel页面

スクリーンショット 2021-08-18 19.57.23.png

5. 数据库连接设置

让我们编辑Laravel的.env文件，将其编辑如下。

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=sample
DB_USERNAME=root
DB_PASSWORD=root

将.env文件复制为.env.develop，并将其推送到 git 等平台上似乎是个很好的选择。

6. 小赠品

我們將自定義以確保 Docker 在啟動時能自動適應新增的套件和修改的環境檔案，透過 npm 或 composer 進行管理。

创建environment.develop.ts。

我们需要为Angular项目的开发环境准备一个环境文件。
请复制front/src/environments/environment.ts，创建front/src/environments/environment.develop.ts。

调整 docker-compose.yml 文件

让我们去掉docker-compose.yml文件中有关node容器和PHP容器的注释。

version: '3.9'

services:
  node:
    image: node:16.6.2
    working_dir: /projects
    ports:
      - 80:4200
    volumes:
      - './../../user:/projects:cached'
    tty: true
    command: bash -c "
      npm cache clean -f;
      npm install;
      cp -f src/environments/environment.develop.ts src/environments/environment.ts;
      npm link @angular/cli && export PATH='$HOME/.npm-global/bin:$PATH';
      npm start;
      "
  php:
    build: ./docker/php
    volumes:
      - ./../../php:/var/www:cached
    command: -c "
      cp -f .env.develop .env;
      composer install;
      php artisan config:cache && php artisan config:clear;
      "

在节点容器启动时，将清除npm缓存、安装npm包、复制Angular环境文件、设置路径以便使用ng命令，并启动Angular服务器。

在启动容器时，会拷贝环境文件、安装composer包并清除Laravel缓存。

7. 最后确认

开机

docker-compose up -d

角度

由于Angular编译可能需要一些时间，所以可能需要等待几分钟。

Laravel 拉拉维尔

MySQL 是一种广泛使用的关系数据库管理系统。

如果Laravel的迁移能够成功执行，那就没问题了。

docker-compose exec php bash -c "php artisan migrate"

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (46.45ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (41.81ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (42.92ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (58.75ms)

截止

docker-compose down
✖
广告
将在 10 秒后关闭
bannerAds