Webpack入門
MacからLaradock PostgreSQLで接続エラー
Mac で Laradock の構築
Dockerで不要なイメージを削除
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
Composer インストール
nvm インストール
npm install が Mac でエラー
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
DI(依存性注入)
DIコンテナのはじめ
[Ubuntu]Let's Encryptで無料の証明書を利用する
[Apache]Apache2.4のアクセス制限が変更
[Ubuntu]rootのログインとsudo権限追加
タミヤ マイコンロボット工作セットをMacに接続してみた
pgAdimn4 でブラウザで開けなくなる
Java8 を HomebrewとjEnvで構築
Android Studio環境構築 2019
ロケールの再構築
vagrant グループに Apacheを追加
Linux2 Apache2 + PHP7.3 + PostgreSQL10
Anadondaの削除
[Mac]初期設定メモ(CentOS)
[Mac]PostgreSQL起動
FormRequest を利用したバリデーション
try-catch で Exception検知
[Debian]Node.js安定板インストール
Middlewareを利用したルートグループ化
namespaceを利用したルートグループ化
名前付きルートによるリダイレクト
artisanコマンド
IE11以下でclosest() を利用する
Karma と Mochaインストール
コンポーネントを親に登録
[脱jQuery]LoadingOverlay をネイティブで実装
Targetを利用せずに新規ウィンドウを開く(rel,class)
[脱jQuery]ネイティブでDrag&Dropやtableソート
[脱jQuery]$(document).on() をネイティブでコーディング
[Git]不要ファイル履歴削除
[Git].gitignore が反映されない
[GAS]Gmail指定ラベルの不要メール削除
UFJ API(開発用)を利用してみる
RuntimeException No application encryption key has been specified
PHP7.3 で compser install できない
Laravel インストール&起動
配列結合 array_merge() と 演算子の違い
[Debian]PHPのaptパッケージが消失?
[脱jQuery]始める前に
[VSCode]th td を自動整形させない
2020/01/24
icon Webpack入門

webpack の環境を構築してみる
参考:webpack 4 入門 webpackの最大の特徴は「モジュールバンドラ」を利用して、複数のjsファイルを1つのファイル「bundle.js」にまとめる。

構成


├── node_modules
├── package.json
├── public
│   ├── index.html
│   └── js
│       └── bundle.js
├── src
│   └── js
│       ├── app.js
│       └── modules
│           ├── add-calculator.js
│           └── tax-calculator.js
└── webpack.config.js

上記の場合「app.js」「add-calculator.js」「tax-calculator.js」をビルドして「bundle.js」にまとめます。
※NodeJS, npm, yarn などは解説省略

package.json 作成


$ yarn init  --yes
yarn init v1.21.1
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.04s.

webpackインストール


$ yarn add webpack webpack-cli webpack-dev-server --dev

package.json の内容


var path = require('path');

module.exports = {
  entry: "./src/js/app.js",
  output: {
    path: path.join(__dirname, 'public/js'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.ts', '.svg']
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }],
    }, {
      test: /\.ts$/,
      use: [{
        loader: 'ts-loader',
        options: {
          compilerOptions: {
            declaration: false,
            target: 'es5',
            module: 'commonjs'
          },
          transpileOnly: true
        }
      }]
    }, {
      test: /\.svg$/,
      use: [{
        loader: 'html-loader',
        options: {
          minimize: true
        }
      }]
    }]
  }
}

entry & output

entry:コンパイルするメインJSファイルパス(エントリーポイント)

output:出力するメインJSファイルのパス 最初に require した path を利用して最終的に「public」ディレクトリに「bundle.js」を書き出す

resolve.extensions

require , importするファイル拡張子を省略設定

module:babel-loader

ビルドする際、利用するモジュールを設定 babel-loader: Bableに対応する

Babel

次世代 EcmaScript で書かれたJSを、サポートしていないブラウザでも動くJSに変換

module:ts-loader

ts-loader:TypeSceiptに対応する

yarnでインストール


$ yarn install
yarn install v1.21.1
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.12s.

jsファイルの作成


$ mkdir src

modules/add-calculator.js


export default function addCalculator(number1 ,number2) {
    return number1 + number2;
}

app.js


import addCalculator from './modules/add-calculator';
import taxCalculator from './modules/tax-calculator';

var item1_price = 100;
var item2_price = 300;
var total_price = addCalculator(item1_price, item2_price);
var tax = 0.1;
var tax_price = taxCalculator(total_price, tax);

window.onload = function() {
    document.getElementById('calculate-result').innerHTML = tax_price;
};

modules/tax-calculator.js


export default function taxCalculator(price ,tax) {
    return Math.round(price * (1 + tax));
}

webpackでビルド


$ yarn run webpack

webpack コマンドを実行する

node_modules のパスをbash に登録することで、webpack コマンドを直接利用できる

.bash_profile を開く


$ vi ~/.bash_profile

.bash_profile に追記


export PATH=$PATH:./node_modules/.bin

.bash_profile を再読み込み


$ source ~/.bash_profile
2020/01/21
icon MacからLaradock PostgreSQLで接続エラー
Laradock の接続は psql のバージョンが 12 だとプロトコルエラーとなった。

$ psql -h localhost -U default -l
psql: error: could not connect to server: FATAL:  unsupported frontend protocol 1234.5679: server supports 2.0 to 3.0
Macにインストールした psql のバージョンを変更する。

psql のパスを確認

$ which psql
/usr/local/opt/libpq/bin/psql

Homebrew で任意のPostgreSQLをインストール

$brew search postgresql
...
$ brew install postgresql@11

エイリアスを追加

$ alias psql='/usr/local/opt/postgresql@11/bin/psql'
2020/01/18
icon Mac で Laradock の構築

事前準備

Install Docker Desktop on Macをダウンロードしてインストール

Laradock ダウンロード

$ git clone https://github.com/Laradock/laradock.git

ディレクトリ構成

laradock/.env  #Dockerコンテナイメージ & 設定
projects/ #Laracelプログラムソース

自分が開発する場合、複数のプロジェクトを一つのサーバで管理するため、projects とした。

例) projects/blog/ projects/shop/ ※Laravelプロジェクト直下に、.htaccess でmod_rewirte(Apacheの場合)

.env を作成(コピー)

$ cd laradock/
$ cp env-example .env

.env の設定

#Dockerのwebサーバーの同期ディレクトリ
#ホスト側のディレクトリを指定
APP_CODE_PATH_HOST=../projects/ 

#Dockerのstorage等を保存
#ホスト側のディレクトリを指定
DATA_PATH_HOST=../.laradock/data

#PHP
PHP_VERSION=7.3

PHP_INTERPRETER=php-fpm

# php-fpm で PostgreSQLドライバをインストール(MySQLはインストールしない)
PHP_FPM_INSTALL_PGSQL=true

PHP_FPM_INSTALL_MYSQLI=false

ホストの設定

コンテナー名が自動的にホスト名になるので、docker-compose.yml で明示的にホスト名を設定する


### PHP-FPM ##############################################
    php-fpm:
      hostname: laradock    //ホスト名を明示的に設定
      build:
        context: ./php-fpm

Docker ビルド & 起動

必要に応じてコンテナを指定して、ビルド & 起動(初回は時間がかかります)

$ docker-compose up --build -d apache2 postgres

Docker 起動確認

$ docker-compose ps
           Name                          Command               State                    Ports                  
---------------------------------------------------------------------------------------------------------------
laradock_apache2_1            /opt/docker/bin/entrypoint ...   Up      0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp
laradock_docker-in-docker_1   dockerd-entrypoint.sh            Up      2375/tcp, 2376/tcp                      
laradock_php-fpm_1            docker-php-entrypoint php-fpm    Up      9000/tcp                                
laradock_postgres_1           docker-entrypoint.sh postgres    Up      0.0.0.0:5432->5432/tcp                  
laradock_workspace_1          /sbin/my_init                    Up      0.0.0.0:2222->22/tcp  

Docker 内部にアクセスしてLaravelプロジェクト作成

$ docker-compose exec workspace bash
# composer create-project laravel/laravel project-name

Laravelプロジェクトの PostgreSQL 設定

指定したPostgreSQL ホスト、ユーザ情報を Laravelプロジェクトの .env を設定

DB_CONNECTION=pgsql
DB_HOST=postgres
DB_PORT=5432
DB_DATABASE=blog
DB_USERNAME=default
DB_PASSWORD=secret

.htadcess の設定

複数のLaravelプロジェクトを Dockerで動かしたいので、プロジェクト直下に .htaccess を作成して、server.php に mod_rewrite してやる。


    
        Options -MultiViews
    

    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} -d [OR]
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule ^ ^$1 [N]

    RewriteCond %{REQUEST_URI} (\.\w+$) [NC]
    RewriteRule ^(.*)$ public/$1

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ server.php

ブラウザアクセス

http://localhost/

Docker 停止

$ docker-compose stop
<< 最初 < 前ページ 次ページ > 最後 >>