# 概要
laravel-nuxtをDockerで動かすのが面倒だったため、備忘録として。
環境
Docker for mac
docker-compose.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 のエラーが出たから暫定対応したメモを参考に。
諸事情で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
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でLaravelのデフォルトページを確認する。
Laravel Nuxtを参考にしながら、
composer require pallares/laravel-nuxt
でlaravel-nuxtを導入。
//config/app
return [
// ...
'providers' => [
// ...
Pallares\LaravelNuxt\LaravelNuxtServiceProvider::class,
],
];
// routes/web.php
Route::get(
'{uri}',
'\\'.Pallares\LaravelNuxt\Controllers\NuxtController::class
)->where('uri', '.*');
npm の設定
npm install
npm install laravel-nuxt
で必要なモジュールを入れる。
package.jsonに以下を追記。
// package.json
"scripts": {
"start": "laravel-nuxt"
},
nuxt.config.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
をサンプルとして作成。
//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
を編集
#!/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にアクセス。
以上。