LoginSignup
45
38

More than 1 year has passed since last update.

@kaba_farm

【備忘録】ゼロからDockerでLaravel+Nuxt TypeScript+MySQLの環境構築をしてトップページを表示するまで

Last updated at Posted at 2021-02-13

前提

ローカル環境

  • macOS Catalina10.15.5
  • Docker for mac 2.3.0.4

バージョン

  • PHP...7.3
  • Laravel...7.30.1
  • Node.js 14.6
  • nuxt/types 2.14
  • MySQL 5.7

その他

  • 最終的なディレクトリ構成
Terminal
$ tree -a -L 2 .
.
├── .env
├── .env.example
├── .gitignore
├── .idea
│   ├── modules.xml
│   ├── myapp.iml
│   └── workspace.xml
├── docker
│   ├── nginx
│   ├── node
│   └── php
├── docker-compose.yml
├── nuxt
│   ├── .editorconfig
│   ├── .git
│   ├── .gitignore
│   ├── .nuxt
│   ├── .prettierrc
│   ├── README.md
│   ├── assets
│   ├── components
│   ├── layouts
│   ├── middleware
│   ├── node_modules
│   ├── nuxt.config.js
│   ├── package.json
│   ├── pages
│   ├── plugins
│   ├── static
│   ├── store
│   ├── tsconfig.json
│   └── yarn.lock
└── laravel
    ├── .editorconfig
    ├── .env
    ├── .env.example
    ├── .gitattributes
    ├── .gitignore
    ├── .styleci.yml
    ├── README.md
    ├── app
    ├── artisan
    ├── bootstrap
    ├── composer.json
    ├── composer.lock
    ├── config
    ├── database
    ├── package.json
    ├── phpunit.xml
    ├── public
    ├── resources
    ├── routes
    ├── storage
    ├── tests
    ├── vendor
    └── webpack.mix.js

プロジェクト用ディレクトリを用意

Terminal
$ mkdir -p ~/workspace/myapp
$ cd ~/workspace/myapp
$ mkdir -p laravel docker/{php,nginx,node}
$ mkdir docker/nginx/{conf.d,logs}

.envの準備

先に.env.exampleを編集してからコピーして.envをつくる

myapp
$ touch .env.example .gitignore

.env.exampleと.gitignoreを編集

.env.example
PROJECT_PATH=./laravel
TZ=Asia/Tokyo
WEB_PORT=10080
DB_PORT=13306
DB_TESTING_PORT=13307
DB_CONNECTION=mysql
DB_NAME=myapp
DB_USER=willrewrite
DB_PASS=willrewrite
DB_ROOT_PASS=willrewrite
MAILHOG_PORT=18025
MAIL_HOST=mail
MAIL_PORT=1025

COMPOSE_HTTP_TIMEOUT=70
FRONT_PORT=3000
.gitignore
.env
.idea
# その他個別に追加

.env.exampleをコピー

myapp
$ cp .env.example .env

コピー後、個別のプロジェクトに合わせて.envの環境変数を上書きする

必要なファイルを作成

myapp
$ touch docker-compose.yml \
docker/php/{php.ini,Dockerfile} \
docker/nginx/{conf.d/default.conf,Dockerfile} \
docker/node/Dockerfile

各ファイルを編集

docker-compose.yml

version: "3"

services:
  web:
    build:
      context: .
      dockerfile: ./docker/nginx/Dockerfile
      args:
        - TZ=${TZ}
    volumes:
      - ./docker/nginx/logs:/etc/nginx/logs
      - ./docker/nginx/conf.d:/etc/nginx/conf.d
      - ${PROJECT_PATH}:/var/www/laravel
    ports:
      - ${WEB_PORT}:80
    links:
      - app
    depends_on:
      - app

  app:
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile
      args:
        - TZ=${TZ}
    volumes:
      - ${PROJECT_PATH}:/var/www/laravel
    links:
      - db_master
    environment:
      - DB_CONNECTION=${DB_CONNECTION}
      - DB_HOST=db_master
      - DB_DATABASE=${DB_NAME}
      - DB_USERNAME=${DB_USER}
      - DB_PASSWORD=${DB_PASS}
      - TZ=${TZ}
      - MAIL_HOST=${MAIL_HOST}
      - MAIL_PORT=${MAIL_PORT}

  db_master:
    image: mysql:5.7
    environment:
      - MYSQL_DATABASE=${DB_NAME}
      - MYSQL_USER=${DB_USER}
      - MYSQL_PASSWORD=${DB_PASS}
      - MYSQL_ROOT_PASSWORD=${DB_ROOT_PASS}
      - TZ=${TZ}
    ports:
      - ${DB_PORT}:3306

  front_app:
    build:
      context: .
      dockerfile: ./docker/node/Dockerfile
      args:
        - TZ=${TZ}
    volumes:
      - ./nuxt:/var/www/nuxt
    ports:
      - ${FRONT_PORT}:3000
    links:
      - web
    depends_on:
      - web

Nginxの設定

docker/nginx/Dockerfile
FROM nginx:1.15.7-alpine
# timezone
ARG TZ
COPY ./docker/nginx/conf.d/ /etc/nginx/conf.d/
COPY ./docker/nginx/logs/ /etc/nginx/logs/
COPY ./laravel/ /var/www/laravel/
RUN apk update && apk --update add tzdata && \
  cp /usr/share/zoneinfo/${TZ} /etc/localtime && \
  apk del tzdata && \
  rm -rf /var/cache/apk/*
docker/nginx/conf.d/default.conf
server {
    listen       0.0.0.0:80;
    # server_nameで設定した名前をローカルマシンの/etc/hostsにも設定する
    server_name  www.example.org example.org;
    charset      utf-8;
    client_max_body_size 3M;

    root /var/www/laravel/public;

    index index.php;

    location / {
        access_log  /etc/nginx/logs/access.log main;
        error_log   /etc/nginx/logs/error.log;
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_pass  app:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include       fastcgi_params;
    }
}

PHPの設定

docker/php/Dockerfile

FROM php:7.3.0RC6-fpm-alpine3.8
# timezone
ARG TZ

COPY ./docker/php/php.ini /usr/local/etc/php/
COPY ./laravel/ /var/www/laravel/

WORKDIR /var/www/laravel

RUN apk upgrade --update && apk add --no-cache \
  coreutils freetype-dev jpeg-dev libjpeg-turbo-dev libpng-dev libmcrypt-dev \
  git vim unzip tzdata \
  libltdl && \
  docker-php-ext-install pdo_mysql mysqli mbstring && \
  docker-php-ext-install -j$(nproc) iconv && \
  docker-php-ext-configure gd \
  --with-freetype-dir=/usr/include/ \
  --with-jpeg-dir=/usr/include/ && \
  docker-php-ext-install -j$(nproc) gd && \
  cp /usr/share/zoneinfo/${TZ} /etc/localtime && \
  apk del tzdata && \
  rm -rf /var/cache/apk/*

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
docker/php/php.ini
log_errors = on
error_log = /var/log/php/php-error.log
upload_max_filesize = 3M
memory_limit = -1
post_max_size = 100M
max_execution_time = 900
max_input_vars = 100000
default_charset = UTF-8

[Date]
date.timezone = ${TZ}
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

Nodeの設定

docker/node/Dockerfile
FROM node:14.6.0-alpine
RUN mkdir -p /var/www/nuxt
# timezone
ARG TZ
WORKDIR /var/www/nuxt
COPY ./nuxt/ /var/www/nuxt/

RUN apk update && \
    apk upgrade && \
    apk add --no-cache make gcc g++ python && \
    yarn install

EXPOSE 3000

ENTRYPOINT ["yarn", "run", "dev"]

nuxt-tsのプロジェクト作成

myapp
$ yarn create nuxt-app nuxt

yarn create v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.22.4".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Installed "create-nuxt-app@3.5.2" with binaries:
      - create-nuxt-app

create-nuxt-app v3.5.2
✨  Generating Nuxt.js project in nuxt
? Project name: nuxt
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

一旦サーバを立ち上げ画面確認

myapp
$ cd nuxt
$ yarn run dev

  • localhost:3000にアクセスして下記の画面を確認したあと、command + Cでサーバストップ

  • コンテナ起動時に備えpackage.jsonを修正

nuxt/package.json
{
  "name": "nuxt",
  "version": "1.0.0",
  "private": true,
  "scripts": {
-   "dev": "nuxt",
+   "dev": "HOST=0.0.0.0 PORT=3000 nuxt",
    "build": "nuxt build",
-   "start": "nuxt start",
+   "start": "HOST=0.0.0.0 PORT=3000 nuxt start",
    "generate": "nuxt generate"
  },
  // 以下略
}

laravelディレクトリ直下にLaravelのプロジェクト作成

myapp
$ docker-compose run app composer create-project --prefer-dist "laravel/laravel=7.30.*" .

./laravelディレクトリ以下が次のような構成になっていればOK

myapp
$ tree -a -L 1 laravel
laravel
├── .editorconfig
├── .env
├── .env.example
├── .gitattributes
├── .gitignore
├── .styleci.yml
├── README.md
├── app
├── artisan
├── bootstrap
├── composer.json
├── composer.lock
├── config
├── database
├── package.json
├── phpunit.xml
├── public
├── resources
├── routes
├── server.php
├── storage
├── tests
├── vendor
└── webpack.mix.js

コンテナをバックグラウンドで起動

myapp
$ docker-compose up -d --build

Laravelの設定ファイルをキャッシュ等

myapp
$ docker-compose exec app ash
$ php artisan -V   // バージョンが表示されればOK
$ php artisan config:cache
$ php artisan migrate
$ chmod -R a+rw storage/ bootstrap/cache
$ exit

画面確認

  • 再度localhost:3000にアクセスし、TOP画面が表示されれば成功

Nuxt、Laravel間での通信を確認

Laravel側の設定

laravel/routes/api.php
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
 * 中略
 */
+ Route::get('/', function () {
+    return 'Hello';
+ });

Nuxt側の設定

myapp
$ cd nuxt
$ yarn add @nuxtjs/proxy @nuxtjs/dotenv
nuxt/nuxt.config.js
+ const environment = process.env.NODE_ENV || 'development'
+ require('dotenv').config()

export default {
// (中略)

  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
+   '@nuxtjs/proxy',
+   '@nuxtjs/dotenv',
  ],

+ proxy: {
+   '/api':
+     environment === 'development'
+       ? process.env.API_URL
+       : 'https://www.example.org',
+ },

+ axios: {
+   baseURL: process.env.API_URL,
+   browserBaseURL: process.env.API_BROWSER_URL,
+   credentials: true,
+ },

}
myapp/nuxt
$ touch .env
nuxt/.env
API_URL=http://web/api
API_BROWSER_URL=http://localhost:10080/api
nuxt/pages/index.vue
<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">
         {{ greet }} // デフォルトの「nuxt」から変更
      </h1>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          rel="noopener noreferrer"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          rel="noopener noreferrer"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  async asyncData({ app }): Promise<object> {
    const greet: string = await app.$axios.$get('/').catch((err) => err)
    return { greet }
  }
})
</script>
// 以下略
  • localhost:3000にアクセスして、タイトルがHelloに変わっていたらOK

hello.jpg

scssの導入

myapp/nuxt
$ yarn add -D \
node-sass@^5.0.0 \
sass-loader@^10.1.0 \
@nuxtjs/style-resources

$ mkdir assets/scss && touch assets/scss/style.scss
nuxt.config.js
css: [{ src: '~/assets/scss/style.scss', lang: 'scss' }],
assets/scss/style.scss
body {
  background: red;
}

localhost:3000にアクセスし、画面が真っ赤になっていたらOK

45
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
45
38