背景

m2sd/nuxt-laravel
をDockerで動作させるのに苦労したので備忘録として

前提条件

macOS Mojave
Laravel6.0の環境構築ができている(Dockerで)
Docker for Macをインストール済

Dockerの設定

Laravelのローカル環境をDockerを利用してSSLからLaravel Duskの設定まで
これらを参照する。

_docker-configs
├── docker-compose.yml #編集
├── nginx
│   ├── cert-key
│   └── nginx.conf
├── php-fpm
│   └── Dockerfile #編集

docker-compose.yml

version: "3"
services:
  nginx:
    image: nginx:alpine
    depends_on:
      - php-fpm
    ports:
      - 80:80
      - 443:443
    volumes:
      - ../:/var/www/html
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
      - ./nginx/cert-key:/etc/nginx/ssl
  php-fpm:
    build: ./php-fpm
    ports:
      - 9000:9000
      - 8001:8001
      - 3000:3000
    environment:
      - HOST=0.0.0.0
    working_dir: /var/www/html
    volumes:
      - ../:/var/www/html
# DBの設定などは一旦省略する


FROM node:12.13.0-alpine as node

FROM php:7.3-fpm-alpine

## PDOなどインストールは省略

WORKDIR /var/www/html

# マルチステージビルドでphp-fpmコンテナにnodeとnpmを追加する
COPY --from=node /usr/local/bin/node /usr/local/bin/
COPY --from=node /usr/local/lib/node_modules/ /usr/local/lib/node_modules/
RUN ln -s /usr/local/bin/node /usr/local/bin/nodejs \
    && ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm \
    && ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npx

RUN npm install -g npx @vue/cli

Dockerfileのビルドと実行とコンテナに入る。
docker-compose.ymlのあるディレクトリで以下を実行。

$ docker-compose build
$ docker-compose up -d
$ docker-compose exec php-fpm sh

Laravelのresources/nuxtにNuxtを入れる

コンテナにて

/var/www/html # npx create-nuxt-app resources/nuxt

選択肢は適当に。

Nuxtのインストールが完了したら、Nuxtの設定関連ファイル群をLaravelのRootディレクトリに移動させる。

/var/www/html # cd resources/nuxt
/var/www/html/resources/nuxt # mv .babelrc jest.config.js nuxt.config.js package-lock.json package.json ../..
/

設定ファイル群を移動すると以下のようなディレクトリ構成になる

.
├── _docker-configs
├── app
├── artisan
├── bootstrap
├── composer.json
├── composer.lock
├── config
├── database
├── jest.config.js
├── node_modules
├── nuxt.config.js
├── package-lock.json
├── package.json
├── phpunit.xml
├── public
├── readme.md
├── resources
├── routes
├── server.php
├── storage
├── tests
├── vendor
└── webpack.mix.js

一旦LaravelのRootディレクトリに戻り、nuxt-laravelと必要なモジュールをnpmでインストールする。

/var/www/html/resources/nuxt # cd -
/var/www/html # npm i -D nuxt-laravel@next @nuxtjs/axios @nuxtjs/proxy

nuxt.config.jsを編集

nuxt.config.js

module.exports = {
  srcDir: 'resources/nuxt', //追加
  mode: 'spa', //追加
  modules: [
    'nuxt-laravel', //追加
  ],
  router: {
    base: "/app/" //追加 任意のディレクトリ名
  },
}

Nuxtの開発環境サーバーを動かす

npm run dev実行後、localhost:3000/app/にアクセス

/var/www/html # npm run dev

Nuxtのデフォルトが見えればおｋ。

LaravelでのテストAPI作成

routes/api.phpを編集,以下のコードを追加

api.php

Route::middleware('api')->get('/test', function (Request $request) {
    return [
        'test'
    ];
});

api/testをたたいて、TestとでればOK

NuxtデフォルトページにAPIを組み込む

resources/nuxt/pages/index.vueを編集

index.vue

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        {{title}}
      </h1>
      <h2 class="subtitle">
        My world-class Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  data() {
    return {
      title: ''
    }
  },
  mounted() {
    this.$axios.get('https://localhost/api/test').then(response => {
      this.title = response.data;
    });
  },
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

** 開発環境サーバーだとCORSでAPI読み込めないので、ここらへんの記事を参照にしてください。
本記事では一旦スルーします。

Laravelのroutes/web.phpの編集

Nuxt.jsで設定したファイルが呼び出されるようにルーティングを編集

web.php

Route::get(
    '{uri}',
    '\\'.Pallares\LaravelNuxt\Controllers\NuxtController::class
)->where('uri', '.*');

Nuxt.jsの本番用のビルド

npm run buildで静的ファイルを吐き出します。

/var/www/html # npm run build

localhostにアクセスして

以下の画像が出ればOK。

** このままの状態だと開発環境サーバーでは /app/に対して本番では/でアクセスする違いに気持ち悪さがあるかもしれない..。また肝心のLaravelがAPIだけしか使えないので注意。

routes/web.phpを以下のように変更すれば、

web.php

Route::get('/', function () {
    return view('welcome');
});

Route::get(
    'app/subpage{path}',
    '\\'.Pallares\LaravelNuxt\Controllers\NuxtController::class
)->where('path', '.*')
 // Redirect to a spcific subpage/<path> from within Laravel
 // by using Laravels route helper
 // e.g.: `route('nuxt.subpage', ['path' => '/<path>'])`
 ->name('nuxt.subpage');

localhost/app/subpageでNuxtで作成したページが見れる。
それ以外でLaravelで作成した画面も共存できる。

参考

m2sd/nuxt-laravel
skyrpex/laravel-nuxt