소개

만나서 반가워요!
최근 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 [email protected]:ssk9597/Docker-Laravel-Nuxt-Nginx-MySQL.git
$ cd Docker-Laravel-Nuxt-Nginx-MySQL
$ make nuxt
$ make backend

이 네 가지 명령은 Nuxt.js와 Laravel 환경을 만들었습니다.

단지 이대로는 Nuxt.js와 Laravel간의 통신을 할 수 없기 때문에 일부 파일의 수정이 필요합니다.
그럼 수정하겠습니다!

파일 수정

frontend

프런트 엔드는 두 개의 파일을 수정합니다. (일단 검증을 위해 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 측은 검증을 위해 하나의 파일을 수정합니다.

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의 도입은 명령만으로 OK입니다.

터미널

$ make storybook

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

이제 풀 패키지 환경을 만들 수 있습니다!
상당히 간단합니다.

여기에서 많은 코드를 작성하고 개발하자! !