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

ITかあさん

最新記事

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で作業中、タイトルをちゃんと設定したいな、となりまして。

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

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

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

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

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

Herokuで無料SSLの設定

お名前.comで取得したドメインをHerokuの無料SSL証明書でSSL化

自分のブログすらSSL化してないのに、何言ってんだって気もしますが、Herokuにホスティングした独自ドメインのサイトをHerokuの無料SSL証明書つかって独自ドメインのサイトをSSL化したいと思います。
SSL無料証明書を使うにはHerokuのdyno(Hobbyプラン以上 月額7$以上)を設定する必要がります。

なお、お名前.comはあくまで私が普段つかってるレジストラであって、DNS設定できるならなんでも良いと思います。

Heroku > 対象のアプリ > Setting Domains and certificatesから設定します

Configure SSLから Automaticallyをえらびます。

 

DNSの設定は前回の設定内容を確認してもらうとして、独自ドメイン+herokudns.comをCNAMEで設定すればOKです。

Automaticallyを選んだ状態で決定すると、DNS設定について記載がありますので、これをそのままDNSのCNAMEで設定すればSSLは終了です

DNS CNAME設定