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

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

## 環境
### Dockerfile
<ul>
<li>PHP(7.4-fpm-buster)</li>
<li>Nginx(1.18-alpine)</li>
<li>MySQL(5.7)</li>
<li>Node.js(14.15.3-alpine)</li>
</ul>

### 作れる環境
<ul>
<li>Nuxt.js</li>
<li>Laravel</li>
<li>TypeScript</li>
<li>Vue3.0(Composition-API)</li>
<li>Storybook</li>
</ul>

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

https://github.com/ssk9597/Docker-Laravel-Nuxt-Nginx-MySQL

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

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

```terminal:ターミナル
$ git clone git@github.com: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の修正
```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:.env
API_URL=http://localhost:18080/api
```

##### pages/index.vueの修正で検証
```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つファイルを修正します。

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

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

![スクリーンショット 2021-04-28 13.09.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/838372/99a972ed-deb2-750b-e0e7-24aab162b9b5.png)

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

## ここからは任意で追記していきましょう！
### TypeScript
TypeScriptの導入はファイルの追記も必要になります。

```terminal:ターミナル
$ make typescript
```

#### ファイルの修正
##### shims-vue.d.tsに追記
```typescript:frontend/shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}
```

##### tsconfig.jsonに追記
```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の導入も、ファイルの追記が必要になります。

```terminal:ターミナル
$ make composition-api
```

#### ファイルの修正
##### nuxt.config.jsに追加
```javascript:frontend/nuxt.config.js
{
  buildModules: [
    '@nuxtjs/composition-api/module'
  ],
  generate: {
    // choose to suit your project
    interval: 2000,
  }
}
```

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

```terminal:ターミナル
$ make storybook

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

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

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