20190323のlaravelに関する記事は5件です。

投稿日：2019-03-23T18:25:04+09:00

WebComponentsの使い所

Laravel職人を探す用の外部サイトで使うためのウィジェットをWebComponentsで作ってみた。
https://widget.kawax.biz/
（Laravel Mixは使ってるけどLaravelは関係ない）

WebComponentsなのでJSファイル一つ読み込めばどこでも使える。
<script src="https://widget.kawax.biz/artisans.js" defer></script>
<artisans-user limit="5"></artisans-user>
WebComponentsはこのくらいの使い方がちょうどいい。ReactやVue.jsを捨てて全部置き換えるなんて未来はたぶんない。

サービス内と次に作る予定のChrome拡張はVue.jsを使うし。

動作確認済

Mac/Windows/iOSとChrome/Firefox/Safari/Edgeで表示できることは確認した。
EdgeではまだPolyfillが必要。

CSSの扱い

WebComponents的には内で書くのが一番良いんだろうけどCSSだけはもう自分で書きたくないのでscssから作ったcssを読み込んでる。
import { html } from 'lit-html'

export default () => {
  const url = 'https://widget.kawax.biz/css/artisans.css'

  return html`<link href="${url}" rel="stylesheet">`
}
import { html } from 'lit-html'

export default () => {
  const url = 'https://widget.kawax.biz/css/artisans.css'

  return html`<style>
  @import "${url}"
  </style>`
}
どっちでもいい。これでもコンポーネント内に閉じたCSSは実現できるけど一瞬反映が遅れる。
CSSを直接埋め込めれば解決するけどその辺りは今後調査。

Webサービス

「Webサービス」の元の定義は相互運用できるもののはずだったけどもう意味が変わってる。
https://ja.wikipedia.org/wiki/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9
それでも自分で作ってサービスを名乗るなら外部向けにデータは提供する。
今回のこれなんかサービス内だけでデータ持ってても意味がない。
https://artisans.kawax.biz/

API/json/更新時間順とAtom Feed/作成時間順を用意してる。
取得以外のAPIを作るかは未定。

一つだけLaravelネタ

WebComponentsで画像表示して気付いたけどServer PushでLinkヘッダー送ってるのに使われてないので警告が出る。
実害はないけど気持ち悪いので対応。
画像関連だけルーティングとミドルウェアを変更。
ついでにキャッシュ用のヘッダー追加。
cache.headersミドルウェアとか何気に初めて使った。
指定できるキーは決まってるのでこういう指定しかできない。
'cache.headers:etag;max_age=300;s_maxage=300'

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-23T16:07:07+09:00

同一リポジトリでLaradock ＋ Nuxt(SSRモード)の環境構築

前提

Docker version 18.09.2
docker-compose version 1.23.2
npm 6.9.0

参考サイト
laradock と nuxt で開発環境構築
 Laravel+Nuxt.js
LaravelとNuxt.jsを同一レポジトリで管理するときの構成
 Laravel に Nuxt.js プロジェクトを入れたい

Laradockの構築

Laradockをインストール用のディレクトリの作成
mkdir guild-test-environment
Laradockのプロジェクトをクローンする
cd guild-test-environment/
git clone https://github.com/Laradock/laradock.git
作成したディレクトリに移動
cd laradock/
.envファイルを作成する
cp env-example .env
docker-compose.ymlを編集し、Nuxt用のポートをマッピングする
ports:
        - "${WORKSPACE_SSH_PORT}:22"
        - "3000:3000"
.envファイル開発環境の構築をするのでルートディレクトリではなく以下のように変更を行う。
- DATA_PATH_HOST=~/.laradock/data
+ DATA_PATH_HOST=.laradock/data
Dockerコンテナを立ち上げる
docker-compose up -d nginx mysql workspace
指定のDockerコンテナが立ち上がる
Creating volume "laradock_mosquitto" with local driver
Recreating laradock_mysql_1            ... done
Recreating laradock_docker-in-docker_1 ... done
Recreating laradock_workspace_1        ... done
Recreating laradock_php-fpm_1          ... done
Recreating laradock_nginx_1            ... done
workspaceコンテナ内に入る
docker-compose exec workspace bash
※ ちなみにコンテナから抜けるには、Ctrl + P + Q

laravel プロジェクト作成

workspaceに入ったままlaravelプロジェクトをインストール
composer create-project --prefer-dist laravel/laravel {プロジェクト名}
インストール結構時間かかる。。。

.envファイルを編集する
#before
# APP_CODE_PATH_HOST=../
#after
APP_CODE_PATH_HOST=../{プロジェクト名}

(option)
#before
#MYSQL_DATABASE=default
#MYSQL_USER=default
#MYSQL_PASSWORD=secret
#after
MYSQL_DATABASE=hogehoge
MYSQL_USER=develop
MYSQL_PASSWORD=develop
dockerを立ち上げ直す
docker-compose up -d nginx mysql workspace
立ち上がって、laradockフォルダと同じ階層にLaravelプロジェクト名のディレクトリができていたらOK!!

TODO
本番ではAmazon Aurora mysql5.7で実施するため
開発環境も5.7に合わせる
php artisan maigrationの実行を入れる

Nuxtのインストール

LINK

Nuxt公式で展開してるtemplateにする
LaravelProjectの直下のclientディレクトリに配置
npx create-nuxt-app guild-test/client

初期設定で色々聞かれるのでとりあえず下記で設定
? Project name client
? Project description My ace Nuxt.js project
? Use a custom server framework none
? Choose features to install Linter / Formatter, Prettier, Axios
? Use a custom UI framework buefy
? Use a custom test framework jest
? Choose rendering mode Universal
? Author name 
? Choose a package manager npm
package.json と nuxt.config.jsの編集

package.json

laravel プロジェクトを作成した際に作られた package.json は捨てて、
nuxt の方と入れ替える。
$ rm package.json # laravelインストール時に生成された方を削除
$ mv ./client/package.json package.json #nuxtの方と入れ替える
nuxt.config.js
$ mv ./client/nuxt.config.js nuxt.config.js
内容編集
module.exports = {
  ~ 省略 ~
  build: {
    ~ 省略 ~
  },
  srcDir: './client',　　　　<- nuxt プロジェクトディレクトリパス
  watchers: {                     <- nuxt コマンドでホットリロードを有効にするため
    webpack: {
      poll: true
    }
  }
}
パッケージをnpmでインストール
npm install
完了後にpackge.jsonの編集を行う
なぜ必要なのかは要調査
{
  "name": "guild-test-nuxt",
  ~ 省略 ~
  "scripts": {
    "dev": "nuxt",                                                  <- before
    "dev": "HOST=0.0.0.0 PORT=3000 nuxt",     <- after
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  ~ 省略 ~
}
開発者モードで起動
npm run dev
> client@1.0.0 dev /var/www/guild-test
> HOST=0.0.0.0 PORT=3000 nuxt

ℹ Preparing project for development                                                                                                                  13:37:38
ℹ Initial build may take a while                                                                                                                     13:37:38
✔ Builder initialized                                                                                                                                13:37:38
✔ Nuxt files generated                                                                                                                               13:37:38

✔ Client
  Compiled successfully in 17.35s

✔ Server
  Compiled successfully in 15.14s

ℹ Waiting for file changes                                                                                                                           13:38:05

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.4.5                            │
   │   Running in development mode (universal)   │
   │   Memory usage: 157 MB (RSS: 295 MB)        │
   │                                             │
   │   Listening on: http://172.31.0.2:3000      │
   │                                             │
   ╰─────────────────────────────────────────────╯
LaravelのAPIからHellowoaldを取得する

client/pages/index.vue
<template>
  <div>{{ data }}</div>
</template>
<script>
export default {
  async asyncData({ app }) {
    const data = await app.$axios.$get('/api')
    return { data }
  }
}
</script>
routes/api.php
//APIテスト用
Route::get('/', function(){ return 'helloworld';});
プロキシモジュールを追加
npm i @nuxtjs/proxy
/nuxt.config.js
module.exports = {
  modules: [
    '@nuxtjs/proxy'
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: '/'
  },
  proxy:{
    '/api' : "http://localhost:8000"
  }
}
workspaceコンテナ内でNuxt/Laravelサーバを立ち上げる
npm run dev
php artisan serve
画面にhelloworldが出てるはず

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-23T16:04:19+09:00

Laradock + Nuxt(SSRモード)をAWS Fargateで実行する

前提

同一リポジトリでLaradock ＋ Nuxt(SSRモード)の環境構築
上記のサイトでLaradock+Nuxtで環境構築できていること

参考サイト

nginxプロキシ設定

nuxt.js(フロント)とLaravel(API)を同一リポジトリ/サーバで動かす時

Laravel公式

Nuxt公式

laradockをdocker-composeをproductionで使用したい場合

Compose をプロダクションで使う

サービスの拡張と Compose ファイル

DockerfileのCMDコマンドを複数実行したい場合

Dockerfileでは、CMDコマンドを複数実行できない
そのためstartup.shでコマンドを記載して実行してもらう

Dockerで複数CMDを実行する方法

Nuxtをバックグラウンドで起動したい

実行したら、npm run startでコマンドが止まってしまい
nginxコマンドが実行されずにWebサーバが起動できてなかった

そのためバックグラウンドでnpm run startを実行するために
foreverモジュールを入れる

Nuxt.jsのアプリケーションをinitd-foreverを使ってデーモン化、自動起動する

githubのプライベートリポジトリからクローンできるように準備する

Dockerfileのbuildで簡単にGithubのプライベートリポジトリをクローンする方法

nginxサーバをプロキシとしてNuxtとLaravel APIと切り替える

Laradockでは、nginxの設定を下記のパスで設定を行えるため
そこでnginxに対してリクエストが来た際に振り分けを行うようにする

/laradock/nginx/sites/default.conf
server {

    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    # For https
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server ipv6only=on;
    # ssl_certificate /etc/nginx/ssl/default.crt;
    # ssl_certificate_key /etc/nginx/ssl/default.key;

    server_name localhost;
    root /var/www/public;
    index index.php index.html index.htm;

    # 基本はすべてLaravelのpublicにアクセスがいくが、/api 以降のパスだけLaravelとする
    # location / {
    #      try_files $uri $uri/ /index.php$is_args$args;
    # }

    # 基本は3000ポートのNuxtサーバに転送を行う
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
    }

    # Laravel API用にnginxをプロキシサーバとして転送させる
    location /api {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_pass php-upstream;
        fastcgi_index index.php;
        fastcgi_buffers 16 16k;
        fastcgi_buffer_size 32k;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        #fixes timeouts
        fastcgi_read_timeout 600;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }

    location /.well-known/acme-challenge/ {
        root /var/www/letsencrypt/;
        log_not_found off;
    }
}
nuxtプロキシの転送先のポートを変更する
/{ProjectName}/nuxt.config.js
proxy:{
    '/api' : "http://localhost:8000"
  }
Fargateに乗せる用のProduction用Dockerイメージを作成する

Production環境では、下記の順番で実行するコマンドをDockerfileに入れる必要がある

nginxコンテナ

githubから/var/wwwにcloneを実行する

node/npmをインストールする

npm installを実行する

コンテナ起動時にnpm run build / npm run startでNuxtサーバを立ち上げる

php-fpmコンテナ

githubから/var/wwwにcloneを実行する

composerをインストールする

composer install/php artisan key:generateを実行する

production用のDockerfile-productionとdocker-compose.ymlを作成する

/laradock/nginx/Dockerfile-production
FROM nginx:alpine

LABEL maintainer="Mahmoud Zalt <mahmoud@zalt.me>"

# nginxの設定ファイルをコンテナ内に配置する
COPY nginx.conf /etc/nginx/
COPY sites/ /etc/nginx/sites-available/
COPY ssl/ /etc/nginx/ssl/
COPY sites/default.conf /etc/nginx/conf.d/

# If you're in China, or you need to change sources, will be set CHANGE_SOURCE to true in .env.

ARG CHANGE_SOURCE=false
RUN if [ ${CHANGE_SOURCE} = true ]; then \
    # Change application source from dl-cdn.alpinelinux.org to aliyun source
    sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/' /etc/apk/repositories \
;fi

RUN apk update \
    && apk upgrade \
    && apk add --no-cache openssl \
    && apk add --no-cache bash \
    # gitをダウンロード
    && apk add --no-cache git \
    && adduser -D -H -u 1000 -s /bin/bash www-data

# AWS fargateではdepends_onやlinkでのコンテナ通信を行えないため、コンテナ名(php-fpm)では接続できない
# そのため127.0.0.1で通信を行う
ARG PHP_UPSTREAM_CONTAINER=127.0.0.1
#ARG PHP_UPSTREAM_CONTAINER=php-fpm
ARG PHP_UPSTREAM_PORT=9000

# Set upstream conf and remove the default conf
RUN echo "upstream php-upstream { server ${PHP_UPSTREAM_CONTAINER}:${PHP_UPSTREAM_PORT}; }" > /etc/nginx/conf.d/upstream.conf \
    && rm /etc/nginx/conf.d/default.conf


# nginxコンテナ内でNuxtをSSRモードで立ち上げるためにnpmをインストールする
RUN apk add --update nodejs nodejs-npm

# ワーキングディレクトリの指定
WORKDIR /var/www

# githubからソースをcloneして配置する
# githubOAuthで作成したKeyを元にcloneする
RUN git clone https://918e37d82bcbcbd0455ffe52e192d8ba0ec67825:x-oauth-basic@github.com/hajime1103/laravel-nuxt-aws-fargate.git .

# Nuxtをビルドする準備をする
RUN npm install

# foreverモジュールを入れて、Nuxtサーバをバックグラウンドで起動できるようにする
RUN npm install -g -y forever

ADD ./startup.sh /opt/startup.sh
RUN sed -i 's/\r//g' /opt/startup.sh
CMD ["/bin/bash", "/opt/startup.sh"]

EXPOSE 80 443
/laradock/nginx/startup.sh
#!/bin/bash

if [ ! -f /etc/nginx/ssl/default.crt ]; then
    openssl genrsa -out "/etc/nginx/ssl/default.key" 2048
    openssl req -new -key "/etc/nginx/ssl/default.key" -out "/etc/nginx/ssl/default.csr" -subj "/CN=default/O=default/C=UK"
    openssl x509 -req -days 365 -in "/etc/nginx/ssl/default.csr" -signkey "/etc/nginx/ssl/default.key" -out "/etc/nginx/ssl/default.crt"
fi

# Nuxt server lunch
npm run build
forever start -c "npm run start" ./

# nginx sever lunch
nginx
/laradcok/php-fpm/Dockerfile-production
#
#--------------------------------------------------------------------------
# Image Setup
#--------------------------------------------------------------------------
#
# To edit the 'php-fpm' base Image, visit its repository on Github
#    https://github.com/Laradock/php-fpm
#
# To change its version, see the available Tags on the Docker Hub:
#    https://hub.docker.com/r/laradock/php-fpm/tags/
#
# Note: Base Image name format {image-tag}-{php-version}
#

ARG LARADOCK_PHP_VERSION=7.2

# FROM laradock/php-fpm:2.2-${LARADOCK_PHP_VERSION}
FROM letsdockerize/laradock-php-fpm:2.4-${LARADOCK_PHP_VERSION}

LABEL maintainer="Mahmoud Zalt <mahmoud@zalt.me>"

ARG LARADOCK_PHP_VERSION

# Set Environment Variables
ENV DEBIAN_FRONTEND noninteractive

# always run apt update when start and after add new source list, then clean up at end.
RUN set -xe; \
    apt-get update -yqq && \
    pecl channel-update pecl.php.net && \
    apt-get install -yqq \
      apt-utils \
      #
      #--------------------------------------------------------------------------
      # Mandatory Software's Installation
      #--------------------------------------------------------------------------
      #
      # Mandatory Software's such as ("mcrypt", "pdo_mysql", "libssl-dev", ....)
      # are installed on the base image 'laradock/php-fpm' image. If you want
      # to add more Software's or remove existing one, you need to edit the
      # base image (https://github.com/Laradock/php-fpm).
      #
      # next lines are here becase there is no auto build on dockerhub see https://github.com/laradock/laradock/pull/1903#issuecomment-463142846
      libzip-dev zip unzip && \
      docker-php-ext-configure zip --with-libzip && \
      # Install the zip extension
      docker-php-ext-install zip && \
      php -m | grep -q 'zip'

#
#--------------------------------------------------------------------------
# Final Touch
#--------------------------------------------------------------------------
#

COPY ./laravel.ini /usr/local/etc/php/conf.d
COPY ./xlaravel.pool.conf /usr/local/etc/php-fpm.d/

USER root

# Clean up
RUN apt-get clean && \
    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* && \
    rm /var/log/lastlog /var/log/faillog

RUN usermod -u 1000 www-data

# Adding the faketime library to the preload file needs to be done last
# otherwise it will preload it for all commands that follow in this file
RUN if [ ${INSTALL_FAKETIME} = true ]; then \
    echo "/usr/lib/x86_64-linux-gnu/faketime/libfaketime.so.1" > /etc/ld.so.preload \
;fi

WORKDIR /var/www

# php.iniをコンテナに配置する
COPY ./php7.2.ini /usr/local/etc/php/php.ini

# Laraveｌプロジェクト入れるためにgitをインストールする
#RUN apt-get install git
RUN apt-get update && apt-get install -y git

# ゴミが残っているとgitのcloneが行えないため消していおく
RUN rm -r html


# githubからソースをcloneして配置する
# githubOAuthで作成したKeyを元にcloneする
RUN git clone https://918e37d82bcbcbd0455ffe52e192d8ba0ec67825:x-oauth-basic@github.com/hajime1103/laravel-nuxt-aws-fargate.git .

# .envファイルを作成する
RUN cp .env.example .env

# Laravelを動作させるための準備をする
# composerをインストールしPHPの依存モジュールをインストールする
# /storage/logs/に対してアクセス権を変更する
RUN curl -sS https://getcomposer.org/installer | php && \
    mv composer.phar /usr/local/bin/composer && \
    composer install && \
    php artisan key:generate && \
    chown -R www-data:www-data /var/www

CMD ["php-fpm"]

# 宣言的な意味で実際にポートを開いてる場合ではない
EXPOSE 9000
/laradock/docker-compose.production.yml
version: '3'

services:
### PHP-FPM ##############################################
    php-fpm:
      build:
        context: ./php-fpm
        dockerfile: Dockerfile-production
        args:
          - LARADOCK_PHP_VERSION=${PHP_VERSION}
          - LARADOCK_PHALCON_VERSION=${PHALCON_VERSION}
      expose:
        - "9000"

### NGINX Server #########################################
    nginx:
      build:
        context: ./nginx
        dockerfile: Dockerfile-production
      ports:
        - "${NGINX_HOST_HTTP_PORT}:80"
        - "${NGINX_HOST_HTTPS_PORT}:443"
      depends_on:
        - php-fpm
docker-composeでビルドを行う
docker-compose -f docker-compose.production.yml build --no-cache nginx php-fpm
docker-compose無しで起動する
※Fargateではlink機能は使用できないため
Fargateでの方法を検討する
docker run -d --name php-fpm laradock_php-fpm
docker run -d --link php-fpm:php-fpm -p 80:80 laradock_nginx
Laravel+NuxtプロジェクトをFargateに乗せる

参考サイト

ECRにDockerイメージをプッシュする

php-fpｍをpushする
$(aws ecr get-login --no-include-email --region ap-northeast-1)
docker tag laradock_php-fpm:latest 636990608596.dkr.ecr.ap-northeast-1.amazonaws.com/laradock_php-fpm:latest
docker push 636990608596.dkr.ecr.ap-northeast-1.amazonaws.com/laradock_php-fpm:latest
nginxコンテナをpushする
$(aws ecr get-login --no-include-email --region ap-northeast-1)
docker tag laradock_nginx:latest 636990608596.dkr.ecr.ap-northeast-1.amazonaws.com/laradock_nginx:latest
docker push 636990608596.dkr.ecr.ap-northeast-1.amazonaws.com/laradock_nginx:latest
Fargateクラスターの作成

AWSでのECSサービスを起動する。
クラスター＞クラスターの作成

クラスターテンプレートを「ネットワーキングのみ」を選択肢して「次のステップへ」

クラスタに名前を付け、このクラスタ用の新しいVPCの作成を有効にします。CIDRブロックとサブネットをデフォルトのままにして[作成]をクリックします。

正常にクラスターが作成されたことを確認する

Application Load balancerの作成

EC2サービス＞ロードバランサー＞ロードバランサーの作成をクリック

Application Load Balancerの作成ボタンをクリック

下記のように設定を行い次の手順へ進む



ALB用の新しいセキュリティグループを作成します

ターゲットグループに名前を付け、残りのパラメータに次のように設定します。

ターゲットタイプは、ECSタスクレベルロードバランシングのIPアドレスとして選択する必要があります。

作成完了されたことを確認する

ECS Fargateタスクを作成する

ECSサービス＞タスク定義＞新しいタスク定義の作成
Fargateを選択する

タスクとコンテナの定義



nginxコンテナの設定

php-fpmコンテナの設定

作成を実施する

ECS Fargateサービスを作成する

ECSサービス＞タスク定義＞FargateLaravelNuxtTestTask＞サービスの作成

サービスの設定を行う



ネットワーク構成



AutoScalingの設定



作成する



動作を確認する

作成したロードバランサーのDNSからアクセスする

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-23T14:39:20+09:00

Laravel5.8をGAE Standard環境にデプロイする

色々エラーが出たのでやり方をメモっておく
https://cloud.google.com/community/tutorials/run-laravel-on-appengine-standard

プロジェクト作成

# 5.8を指定してlaravelプロジェクト作成
$ composer create-project laravel/laravel projectName --prefer-dist "5.8.*"

$ cd projectName

app.yaml

instanceを指定せず、デフォルトのF1のままだと展開は出来てもメモリ不足？でエラーが出るのでF4を指定している

app.yaml

runtime: php72

instance_class: F4

env_variables:
  APP_LOG: errorlog
  APP_KEY: YOUR_APP_KEY
  APP_STORAGE: /tmp
  SESSION_DRIVER: cookie

.gcloudignore

# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# PHP Composer dependencies:
/vendor/

コード追加/編集

config/view.php

// compiledの部分を修正
'compiled' => storage_path(),

bootstrap/app.php

// 追加
$app->useStoragePath(env('APP_STORAGE', base_path() . '/storage'));

composer.json修正

gcp-buildを入れないとdevパッケージが入ってしまう

composer.json

"scripts": {
        "post-install-cmd": [
            "chmod -R 755 bootstrap\/cache",
            "php artisan cache:clear"
        ],
        "gcp-build": [
            "composer install --no-dev"
        ]
}

YOUR_APP_KEY変換

$ sed -i '' "s#YOUR_APP_KEY#$(php artisan key:generate --show --no-ansi)#" app.yaml

展開

$ gcloud app deploy -q

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-23T14:36:29+09:00

Laravel+FontAwesome サブディレクトリ運用で利用する

http://example.com/hogehohge で運用している場合にFontAwesomeを導入するとリンク切れが発生する場合の対処法

原因はfontファイルのパスがサブディレクトリを加味していないのでリンク切れで404エラーに

app.css

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?46e7cec623d8bd790d9fdbc8de2d3ee7);
  src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot?46e7cec623d8bd790d9fdbc8de2d3ee7) format("embedded-opentype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?418dad87601f9c8abd0e5798c0dc1feb) format("woff2"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff?a7140145ebaaf5fb14e40430af5d25c4) format("woff"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf?ff8d9f8adb0d09f11d4816a152672f53) format("truetype"), url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.svg?49279363201ed19a840796e05a74a91b) format("svg");
}

対処はlaravelフォルダ直下の「webpack.mix.js」を以下の様に修正してコンパイル

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .setResourceRoot("/hogehohe/");

　 Tweet
Qiitaで続きを読む

20190323のlaravelに関する記事は5件です。

WebComponentsの使い所

動作確認済

CSSの扱い

Webサービス

一つだけLaravelネタ

同一リポジトリでLaradock ＋ Nuxt(SSRモード)の環境構築

前提

Laradockの構築

laravel プロジェクト作成

Nuxtのインストール

package.json と nuxt.config.jsの編集

package.json

nuxt.config.js

LaravelのAPIからHellowoaldを取得する

Laradock + Nuxt(SSRモード)をAWS Fargateで実行する

前提

参考サイト

nginxプロキシ設定

laradockをdocker-composeをproductionで使用したい場合

DockerfileのCMDコマンドを複数実行したい場合

Nuxtをバックグラウンドで起動したい

githubのプライベートリポジトリからクローンできるように準備する

nginxサーバをプロキシとしてNuxtとLaravel APIと切り替える

Fargateに乗せる用のProduction用Dockerイメージを作成する

production用のDockerfile-productionとdocker-compose.ymlを作成する

Laravel+NuxtプロジェクトをFargateに乗せる

ECRにDockerイメージをプッシュする

Fargateクラスターの作成

Application Load balancerの作成

ECS Fargateタスクを作成する

ECS Fargateサービスを作成する

動作を確認する

Laravel5.8をGAE Standard環境にデプロイする

app.yaml

.gcloudignore

コード追加/編集

composer.json修正

YOUR_APP_KEY変換

展開

Laravel+FontAwesome サブディレクトリ運用で利用する

日付別

タグ一覧