「DockerでNuxt.jsとLaravelの環境を作りたい」と思い立ったので、4つのコマンドで実行できるようにしたよ

はじめに

はじめまして！
最近Nuxt.jsとLaravelで開発することが増えてきたので、Dockerで環境を作りました。
意外とヒットする記事がないので書いてみることにしました。

環境

Dockerfile

• PHP(7.4-fpm-buster)
• Nginx(1.18-alpine)
• MySQL(5.7)
• Node.js(14.15.3-alpine)

作れる環境

• Nuxt.js
• Laravel
• TypeScript
• Vue3.0(Composition-API)
• Storybook

Github

コードはすべてGitHubに上げています。

詳しく確認されたい方はこちらをご確認ください。

それでは環境を作っていきましょう！

ターミナル

$ git clone [e-mail]:ssk9597/Docker-Laravel-Nuxt-Nginx-MySQL.git
$ cd Docker-Laravel-Nuxt-Nginx-MySQL
$ make nuxt
$ make backend

この4つのコマンドで、Nuxt.jsとLaravelの環境ができました。

ただこのままでは、Nuxt.jsとLaravel間での通信ができないため一部ファイルの修正が必要です。
それでは修正していきましょう！

ファイルの修正

frontend

フロントエンドは2つのファイルの修正をします。（一応検証のためにpages/index.vueも修正します。）
ちなみに、ホットリローディング（ファイルの変更を自動で反映してくれる機能）がうまくいかないことも多いので、ホットリローディングを有効にする設定も加えます。

nuxt.config.jsの修正

frontend/nuxt.config.js

require('dotenv').config();
const { API_URL } = process.env;

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  // mode: 'spa',
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'ja',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
  ],

  watchers: {
    webpack: {
      poll: true,
    },
  },

  modules: ['@nuxtjs/axios', '@nuxtjs/proxy', '@nuxtjs/dotenv'],

  env: {
    API_URL,
  },

  proxy: {
    '/api': process.env.API_URL,
  },

  axios: {
    baseURL: process.env.API_URL,
    browserBaseURL: process.env.API_URL,
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
};

.envの修正

.env

API_URL=http://localhost:18080/api

pages/index.vueの修正で検証

frontend/pages/index.vue

<template>
  <div>
    <h1 class="title">
      {{ text }}
    </h1>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const text = await $axios.$get('/');
    return {
      text,
    };
  },
  data() {
    return {
      text: '',
    };
  },
};
</script>

api

api側は検証のために1つファイルを修正します。

api/routes/api.php

<?php
Route::get("/", function () {
  return "Hello World!";
});

これで完了です。
こうなります。

しっかり通信できてますね！

ここからは任意で追記していきましょう！

TypeScript

TypeScriptの導入はファイルの追記も必要になります。

ターミナル

$ make typescript

ファイルの修正

shims-vue.d.tsに追記

frontend/shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

tsconfig.jsonに追記

frontend/tsconfig.json

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": ["@nuxt/types", "@types/node"]
  },
  "files": ["shims-vue.d.ts"],
  "include": [
    "components/**/*.ts",
    "components/**/*.vue",
    "layouts/**/*.ts",
    "layouts/**/*.vue",
    "pages/**/*.ts",
    "pages/**/*.vue"
  ],
  "exclude": ["node_modules", ".nuxt", "dist"]
}

Composition-API

Composition-APIの導入も、ファイルの追記が必要になります。

ターミナル

$ make composition-api

ファイルの修正

nuxt.config.jsに追加

frontend/nuxt.config.js

{
  buildModules: [
    '@nuxtjs/composition-api/module'
  ],
  generate: {
    // choose to suit your project
    interval: 2000,
  }
}

Storybook

Storybookの導入はコマンドだけでOKです。

ターミナル

$ make storybook

// 再起動したいとき
$ make re-storybook

これでフルパッケージの環境が作れます！
だいぶ簡単ですね。

ここからはたくさんコードを書いて開発していきましょう！！