朝霞市在住のWEB系エンジニアかあさんのPHPメインの雑記帳

ITかあさん

最新記事

Dockerでふるーーいphp5.2環境の構築

PHPの古い環境用意するのに、調べたこと、やったことをメモ。

参考

Docker を使って PHP 5.2 環境を用意してみる

これだとurlがrewriteに対応していないので追加

docker pull image

dockerイメージを取得します

docker pull tommylau/php-5.2
docker pull tommylau/nginx
docker pull mysql:5.7

docker image list

itkaasan@itkaasan-ThinkPad:~/work/$ docker image list
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
mysql               5.7                 2f52e94d8acb        12 days ago         373MB
tommylau/nginx      latest              75d215ac1943        12 months ago       109MB
tommylau/php-5.2    latest              7e7ee5c92d52        13 months ago       371MB

my.cnfとnginxの設定ファイルをコンテナからコピー

MySQLの設定ファイルとnginxの設定を上書きしたいので設定ファイルをコンテナからマシンにコピーします、

※取り急ぎコピーして作ったものを記事の一番最後に貼っておきます

docker cp [コンテナ名]:[コンテナのディレクトリ] [ホストのコピー先ディレクトリ]

docker cpコマンドにて設定ファイルを複製しました。

あとはこのファイルをカレントディレクトリに置いて、起動させます

hogeディレクトリを、マウントディレクトリとしてrunコマンドで起動・開始します

mysql5.7コンテナを作成

hogehogeという名称のDBも一緒に作成しました

docker run –name mysql5.7 -v ~/hoge/my.cnf:/etc/mysql/my.cnf -e MYSQL_ROOT_PASSWORD=password -e MYSQL_DATABASE=hogehoge

mysql5.7とリンクしながらphp5.2の入ったコンテナを起動

docker run –name php -v ~/hoge:/var/www/html –link mysql5.7:mysql -d tommylau/php-5.2

php5.2とリンクしつつ、nginxを起動

docker run –name nginx -v ~/hoge:/var/www/html -v ~/hoge/default.conf:/etc/nginx/conf.d/default.conf –link php:php -p 9000:80 -d tommylau/nginx

http://localhost:9000
で、アクセスできます

取り急ぎ無事動きを確認してからと思ったのでdocker-composeに対応していません。。今度対応しよう。。

docker -v オプションで、コンテナにファイルを上書きできるっていうのは初めて知った。

nginxの設定ファイルとmysqlの設定ファイル

server {
listen 80;
root /var/www/html;
index index.html index.htm index.php;
server_name localhost;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
#try_files $uri $uri/ =404;
try_files $uri $uri/ /index.php?$uri&$args;
# Uncomment to enable naxsi on this location
# include /etc/nginx/naxsi.rules
}
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass php:9000;
fastcgi_index index.php;
include fastcgi_params;
}
}
# http://dev.mysql.com/doc/mysql/en/server-system-variables.html
# MySQL5.7のデフォルトのmy.cnfを複製して、only_full_group_byデフォルトoff
# This will be passed to all mysql clients
# It has been reported that passwords should be enclosed with ticks/quotes
# escpecially if they contain "#" chars...
# Remember to edit /etc/mysql/debian.cnf when changing the socket location.
# Here is entries for some specific programs
# The following values assume you have at least 32M ram
!includedir /etc/mysql/conf.d/
[mysqld]
character-set-server=utf8
sql_mode=''
[mysqldump]
default-character-set=utf8
[mysql]
default-character-set=utf8
view raw my.cnf hosted with ❤ by GitHub

Laravel 姓・名 別カラムの検索

Laravel 姓・名 別カラムの検索

first_name + last_name

姓と名が別のカラムで保存されていた場合、
「松田千尋」と検索してもヒットしません。

結論として、whereRawを使って、where節へ挿入する方法を取ります。

$query->whereRaw('CONCAT(last_name, "", first_name) LIKE ? ', '%' . $name . '%');

インジェクション対策として、第二引数に検索対象の文字列を入れます

参考

Laravel 5.8 データベース:クエリビルダ

MySQL select with CONCAT condition

Nuxt.js 環境ごとにAPIのHOSTを変更する

Nuxt.js 環境ごとにAPIのHOSTを変更する

cross-envのインスト

cross-envをインストして、環境ごとに環境変数をわけられるようにします。
npm install --save cross-env

envファイルを作成する

アプリケーション直下に環境ごとにenvファイルを作成します。

env.development.js
env.production.js
env.staging.js

各環境に合わせて、APIのURIを設定します。下記はローカル開発環境用として、ステージング、本番用にそれぞれAPIのURIを設定しておきあmス

module.exports = {
apiBaseUrl: 'http://localhost:3000'
}

package.json

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    //追加
    "build:stg": "cross-env NODE_ENV=\"staging\" nuxt build",
    //追加
    "build:prod": "cross-env NODE_ENV=\"production\" nuxt build",
    "start": "nuxt start",
    //追加
    "start:stg": "cross-env NODE_ENV=\"staging\" nuxt start",
    //追加
    "start:prod": "cross-env NODE_ENV=\"production\" nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    "heroku-postbuild": "npm run build"
  },
...

nuxt.config

envの設定をnuxt.configに追加します

const pkg = require('./package')
//追加
const environment = process.env.NODE_ENV || 'development';
//追加
const envSet = require(`./env.${environment}.js`)
module.exports = {
  //追加
  env: envSet,
  mode: 'universal',

axios

環境変数はprocess.env.変数名
で呼び出すことができます。

var qs = require('qs');
import axios from 'axios'

class ApplyApi {
  constructor() {
    this.apiBase = process.env.apiBaseUrl;
  }
  apply(data) {
    axios.post(`${this.apiBase}/recruit_apply.json`, {
...
    },
     {
      headers: {
        'Content-Type': 'application/json'
      }
    })
  }
}

const applyApi = new ApplyApi();

export default applyApi;

Nuxt.js で動的タイトル設定

Nuxt.js で動的タイトル設定設定したいわー


ちょっと悩んだのでメモがてら。Nuxt.jsで作業中、タイトルをちゃんと設定したいな、となりまして。

<script>
export default {
head () {
return {
title: 'トップページ',
//titleTemplate: '', hide titleTemplate
}
}
}
</script>
view raw index.vue hosted with ❤ by GitHub
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
titleTemplate: '%s - ITかあさんNuxt.jsがんばるまん',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-sbucale=1' },
{ hid: 'description', name: 'description', content: pkg.description },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
//以下略
....

nuxt.config.jsにtitleTemplateを使ってグローバルなタイトルの設定ができますが、それにプラス動的に各ページごとに加えたい時は下記のようにしてあげます

‘%s – ITかあさんNuxt.jsがんばるまん’

titleTemplateが不要な時は各ページで空を入れてあげるしかないっぽい。

これで、トップページの時は下記のようになります

トップページ – ITかあさんNuxt.jsがんばるまん