LoginSignup
7

More than 5 years have passed since last update.

laravel-nuxtをDockerで動かす

Last updated at Posted at 2019-01-03

# 概要
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にアクセス。

以上。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7