使用Laravel + Vue + Vite + Inertia.js来配置Docker开发环境

2 年 ago
清, 宇
4 minutes

首先

在这篇文章中构建的Docker环境是利用Docker重新构建的开发环境，这个开发环境在之前的文章中已经创建过了。前提条件与上次相同。

 

构成

- docker
    - app
	    - Dockerfile
	    - php.ini
	    - www.conf
    - nginx
	    - default.conf
	    - Dockerfile
	    - nginx.conf
    - postgresql
	    - Dockerfile
	    - postgresql.conf
- src
- composer.yml

构建程序

    1. 创建Dockerfile

 

    1. 用于应用程序容器

 

    1. 指定amazonlinux:2023作为容器的基础

 

    1. 来源 amazonlinux:2023

运行dnf -y update

运行dnf -y install unzip \
wget

安装php及相关模块
运行dnf -y install php less php-intl \
php-cli php-json php-common php-devel php-fpm \
php-gd php-mysqlnd php-mbstring php-pdo php-xml

unix socket
运行mkdir /var/run/php-fpm
卷 [ “/var/run/php-fpm” ]

暴露端口9000

入口点 /usr/sbin/php-fpm -F

安装composer
运行curl -sS https://getcomposer.org/installer | php
运行mv composer.phar /usr/local/bin/composer
运行composer self-update

安装node.js
运行curl -fsSL https://rpm.nodesource.com/setup_18.x | bash –
运行dnf -y install nodejs

指定容器目录
工作目录 /var/www/html

用于web（nginx容器）
指定amazonlinux:2023作为容器的基础

安装nginx
运行dnf -y update
运行dnf -y install nginx

暴露端口5173

入口点 [“/usr/sbin/nginx”, “-g”, “daemon off;”]

用于postgres
来源 postgres:15.2-alpine

创建compose.yml
services:
web:
container_name: web-laravel_vue
build:
context: ./docker/nginx/
ports:
– “8000:80”
volumes:
– ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
– ./src:/var/www/html
depends_on:
– app
– db

app:
container_name: app-laravel_vue
build:
context: ./docker/app/
ports:
– “5173:5173”
volumes:
– ./src:/var/www/html/
– ./docker/app/www.conf:/etc/php-fpm.d/www.conf
– ./docker/app/php.ini:/etc/php.ini
db:
container_name: pgdb-laravel_vue
image: postgres:latest
ports:
– “5432:5432”
volumes:
– ./docker/postgresql/postgresql.conf:/etc/postgresql/postgresql.conf
– pgdb-laravel_vue-volume:/var/lib/postgresql/data
environment:
POSTGRES_DB: laravel
POSTGRES_USER: laravel
POSTGRES_PASSWORD: laravel
volumes:
pgdb-laravel_vue-volume:

创建defalt.conf、www.conf nginx、php.ini、postgresql.conf

使用docker命令创建容器
docker compose build
docker compose up -d

在app容器内创建项目
$ docker exec app-laravel_vue bash

# cd /var/www/html
# composer create-project laravel/laravel .

在app容器内安装Vue相关依赖
npm install –save-dev vue
npm install –save-dev @vitejs/plugin-vue
npm install –save-dev

7. Vite的配置文件（vite.config.js）

```
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0',
        hmr: {
            host: '192.168.100.230',
        },
        watch: {
            usePolling: true,
        },
        port:5173
    }
});
```
    1. Inertia.js的安装和设置

 

    1. # 安装

 

    1. composer require inertiajs/inertia-laravel

# 创建Inertia中间件
php artisan inertia:middleware

在/app/Http/Kernel.php中注册（在web中）
\App\Http\Middleware\HandleInertiaRequests::class,

创建CreateInertiaApp
resources/js/app.js
import { createApp, h } from “vue”;
import { createInertiaApp } from “@inertiajs/inertia-vue3”;
import { resolvePageComponent } from “laravel-vite-plugin/inertia-helpers”;
createInertiaApp({
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob(“./Pages/**/*.vue”)
),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});

与app.blade.php和vue的合作

@inertiaHead@vite([‘resources/css/app.css’, ‘resources/js/app.js’])

@inertia

 

路由设置
use Inertia\Inertia;

/*
|————————————————————————–
| Web Routes
|————————————————————————–
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the “web” middleware group. Now create something great!
|
*/

Route::get(‘/’, function () {
return Inertia::render(‘hello-world’);
});

创建用于显示Hello World的Vue文件
resources/js/Pages/hello-world.vue

 

{{ greeting }}

 

测试运行（在容器内分别执行）

php artisan serve --host 0.0.0.0

npm install && npm run dev

赠品

关于复制相同IP的开发环境

修复以下3个文件

    • compose.yml

 

    • /docker/nginx/default.conf

 

    /src/vite.config.js

编写compose.yml文件以防止端口和容器名称重复。

services:
  web:
    container_name: web-laravel_vue2
    build:
      context: ./docker/nginx/
    ports:
      - "8083:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./src:/var/www/html
    depends_on:
      - app
      - db
 
  app:
    container_name: app-laravel_vue2
    build:
      context: ./docker/app/
    ports:
      - "5174:5174"
    volumes:
      - ./src:/var/www/html/
      - ./docker/app/www.conf:/etc/php-fpm.d/www.conf
      - ./docker/app/php.ini:/etc/php.ini

  db:
    container_name: pgdb-laravel_vue2
    image: postgres:latest
    ports:
      - "5436:5432"
    volumes:
      - ./docker/postgresql/postgresql.conf:/etc/postgresql/postgresql.conf
      - pgdb-laravel_vue2-volume:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: laravel_db
      POSTGRES_USER: tanimoto
      POSTGRES_PASSWORD: Kazumakouki1

volumes:
  pgdb-laravel_vue2-volume:

将/docker/nginx/default.conf文件中的端口和容器名称更改。

// 略

location /devserver/ {
        proxy_pass http://app-laravel_vue2:5174/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
}

 // 略

将以下内容以中文进行本地化，只需提供一种选择：
将 /src/vite.config.js 中的端口进行更改。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],

    server: {
        host: '0.0.0.0',
        hmr: {
            host: '192.168.100.230',
        },
        watch: {
            usePolling: true,
        },
        port:5174
    }
});
✖
广告
将在 10 秒后关闭
bannerAds