laravel-nuxtをDockerで動かす

#　概要
[laravel-nuxt](https://www.npmjs.com/package/laravel-nuxt)をDockerで動かすのが面倒だったため、備忘録として。

## 環境
Docker for mac

## docker-compose.yml
```yml
version: '3'
services:
  app:
    build: ./
    volumes: 
      - ./:/var/www/html
    ports:
      - 8000:8000
    environment: 
      - HOST=0.0.0.0
    container_name: app
  nginx:
    image: nginx:alpine
    ports:
      - 80:80
    depends_on:
      - app
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./:/var/www/html
```

## Dockerfile
[laravel 5.6 + laravel-mix 2.x (docker with alpine linux)にて、 npm install したら pngquant で libpng-dev のエラーが出たから暫定対応したメモ](https://qiita.com/hokutoasari/items/e01179cd3bb0e2fd74af)を参考に。
諸事情でHerokuを使いたいので、pdoはpgsqlを入れる。

```
FROM php:7.3-fpm-alpine

RUN apk --no-cache update && \
    apk --no-cache upgrade && \
    apk --no-cache add \
    curl-dev \
    freetype-dev \
    libjpeg-turbo-dev \
    libpng-dev \
    libzip-dev \
    postgresql-dev \
    libxml2-dev \
    zlib-dev \
    pcre-dev \
    g++ \
    make \
    autoconf \
    openssl \
    nodejs-npm \
  && docker-php-ext-install \
    curl \
    dom \
    mbstring \
    simplexml \
    zip \
    opcache \
  && docker-php-ext-configure gd \
    --with-freetype-dir=/usr/include/ \
    --with-jpeg-dir=/usr/include/ \
    --with-png-dir=/usr/include/ \
  && docker-php-ext-install gd \
  && docker-php-ext-install pdo pdo_pgsql \
  && curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer \
  && chmod +x /usr/local/bin/composer \
  && rm -rf /var/cache/apk/*

```

## nginx.conf

```conf
server {
    listen 80;
    root /var/www/html/public;
    index index.php index.html;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        root /var/www/html/public;
        index  index.php index.html index.htm;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(\.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}
```

## Laravel Projectの作成

```
docker-compose build
docker-compose up -d
docker-compose exec app bash
```
でビルド・コンテナの立ち上げ・コンテナ内で、

```
composer create-project "laravel/laravel=5.5.*" laravel-nuxt
```
でLaravel5.5のProjectを作成する

[localhost](http://localhost)でLaravelのデフォルトページを確認する。

[Laravel Nuxt](https://github.com/skyrpex/laravel-nuxt)を参考にしながら、

```
composer require pallares/laravel-nuxt
```
でlaravel-nuxtを導入。

```php
//config/app
return [
  // ...
  'providers' => [
      // ...
      Pallares\LaravelNuxt\LaravelNuxtServiceProvider::class,
  ],
];
```

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

## npm の設定

```
npm install
npm install laravel-nuxt
```
で必要なモジュールを入れる。

package.jsonに以下を追記。

```json
// package.json
    "scripts": {
        "start": "laravel-nuxt"
    },
```

nuxt.config.jsを作成

```js
// nuxt.config.js
const laravelNuxt = require("laravel-nuxt");
 
module.exports = laravelNuxt({
  // Your Nuxt options here...
  modules: [],
  plugins: [],
 
  // Options such as mode, srcDir and generate.dir are already handled for you.
});
```
`resources/nuxt/pages/index.vue`をサンプルとして作成。

```vue
//resources/nuxt/pages/index.vue 
<template>
  <h1>Hello {{ name }}!</h1>
</template>
 
<script>
export default {
  data: () => {
    return { name: 'world' };
  },
};
</script> 
```

`node_modules/laravel-nuxt/bin/laravel-nuxt-dev.js`を編集

```js
#!/usr/bin/env node
const { URL } = require("url");
const ON_DEATH = require("death");
const spawn = require("cross-spawn");
const program = require("commander");
const which = require("npm-which")(__dirname);
const utils = require("../src/utils");
const pkg = require("../package.json");

program
    .version(pkg.version)
    .description(
        "Starts the application in development mode (hot-code reloading, error reporting, etc)",
    )
    .option(
        "-p, --port [port]",
        "A port number on which to start the application",
        8000,
    )
    .option(
        "-H, --hostname [hostname]",
        "Hostname on which to start the application",
-        "127.0.0.1",
+        "0.0.0.0"
    )
    .option(
        "--render-path [path]",
        "URL path used to render the SPA",
        "/__laravel_nuxt__",
    )
    .parse(process.argv);

```

```
npm start
```

で[localhost:8000](http://localhost:8000/)にアクセス。

以上。