Mac

Mac WEB系開発環境を作る

| by 優

新しいMac Book渡された時にすぐ環境を用意できるように覚書き。前職ではWindows使いですが、転職先はMacです。

戦術としてMacを開発のメインウェポンにしつつ、Windows用ツールを利用したい時、遊び用などにサブウェポンとしてWindowsを利用していきます。

どっちが優れているとかではなく、臨機応変にどっちも使っていけばいいんじゃんって考え。

 

Macを触ってみての感想

  • 画面とフォントが美しい。
  • Dockerやクラウドを利用するWEB系の親和性が高い
    Terminalがあるので、Dockerでの開発, AWS CLIやTerraformが扱いやすい。

「WEB開発ならMac」を体感しました。

無料のフリーソフトがWindowsより少ない印象なので、Windowsの優秀なフリーソフトを使いたいなって場合は脇差としてWindowsを使っていきます！

 

スペック

開発するだけなので13インチのMac Book Air 8GB 256GBを購入。

 

１ヶ月後の購入後の私の感想として、やはりWEB開発だけであればメモリ8GB+ストレージ512GB で十分でした。資金に余裕があればメモリ16GBにすると良いですね〜！

 

構成

 

 

 

 

バックアップ

 

MacにはTime Machineというシステムバックアップ機能がある。アップデート前などは必ず保存しておきたいです。

 

 

ブラウザ

Chromeを既定のブラウザにする。

 

開発環境

マルチプラットフォームで環境に左右されないIDE

 

拡張プラグイン

Golang

AI

Nuxt

Vue

 

Golang環境用のVS Code settings.json

VS Code+Golangのsetting.json

 

Laravel関連

どちらもコードを補完してくれる。

 

Phpcsの設定

マーケットプレイス
https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs

パスの設定

$ composer global require squizlabs/php_codesniffer

Changed current directory to /Users/kanehiroyuu/.composer
Using version ^3.5 for squizlabs/php_codesniffer
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Generating autoload files

 

VS Codeにパスを設定します

Settingsをクリックします。

 

検索フォームに「composer」と入力すると、Phpcs:Composer HSON Pathのフォームが表示されます。

先ほど控えたパスを入力します。

検索フォームに「phpcs.standard」と入力すると、Edit in settings.jsonのリンク文字が表示されます。

クリックしてください。

 

プロジェクトにsettings.jsonが生成されます。

上記画像とおなじようにPSR2の規約に設定します。

 

{
    "phpcs.standard": "PSR2"
}

 

Terminalの文字列コピー

iterm2みたいに選択したらコピーできるようにする

  • terminal.integrated.copyOnSelectionで設定検索してチェックを行う

 

 

VS Code ショートカット

  • 拡大
    Command と Shift を押しながら –
  • 縮小
    Command を押しながら –
  • ファイル操作を戻す undo
    command を押しながら z
  • ファイル操作を進める redo
    command を押しながら Shift + z
  • コマンドパレット
    Shift と Command を押しながら p
  • 行の選択移動
    option を押しながら 矢印上下
  • 行の複製
    Shift と option を押しながら 矢印上下
  • 複数行選択
    Shift と option と command を押しながら 矢印上下
    ここから[ or ] でコードの整形ができる
  • 上に行を挿入
    Shift と command を押しながら Enter
  • 複数行範囲
    option と command を押しながら 矢印上下
  • 複数ポイント
    クリックしてカーソルを置く、option を押しながら 別をクリック
  • 検索メニュー表示
    command を押しながら f
    ・検索結果から次を検索
    command を押しながら Enter
  • 置換メニュー表示
    option と command を押しながら f
  • コメント, コメントアウト
    command を押しながら /

 

 

会話

Skypeはまだいいかな。

 

ツール

  • mi
    まだよく使えていないテキストエディタ。
    VS Codeでカバーできない部分をカバーできるかな？
  • keepassx
    IDマネージャ。
    WindowsとMacどちらでも利用できます。
  • Cyberduck
    WinSCPの代わり
  • Postman
    APIサーバにポストする時に利用します。
  • DBeaver
    phpMyAdminみたいな。GUIでデータベースを管理できる凄いやつ。
  • MySQL Workbench
    ER図作成。ER図からDBに接続してスキーマも作成できる。
  • Adobe XD
  • Zeplin
  • Keynote
    Mac界のパワポ。これで簡単な資料が作成されていたりするので、これがないと資料からテキストをコピペできない！

 

ターミナル

 

ターミナルのプロンプト表示変更

$ vi $HOME/.bash_profile


if [ -f ~/.bashrc ]; then
  . ~/.bashrc
fi

 

$ vi $HOME/.bashrc

PS1="\W $ "

alias ls="ls -G"

lsした時にディレクトリに色がつくようにした

 

Finderで隠しファイル .拡張子を表示させる

$ defaults write com.apple.finder AppleShowAllFiles TRUE
$ killall Finder

 

詳細検索

例) githubが本文に含まれているファイルを検索する

$ find . -type f | xargs grep "github"

 

agのインストール こっちも有能

$ brew install ag

使い方

$ ag 検索ワード
$ ag 検索ワード | grep 絞り混みワード

 

Mycli MySQLコマンドラインクライアント

$ brew install mycli

 

使い方

$ mycli -uroot -p -h127.0.0.1 -P 3306

 

 

画像加工

  • プレビュー(標準ソフト)

Windowsのペイントの機能はこれで使えるっぽい。

 

メール

  • Thunderbird
    署名の設定を忘れずに。
    ・改行設定
    『Thunderbird』→『環境設定』→『編集』→『デフォルトで本文テキストの代わりに〜』のチェックを外す

 

オフィス

Amazonでオンライン版購入後に下記リンクで参照できる。

【Office Home & Student 2019 for Mac】にしました。Excell, Word, Power Pointが使えるだけで良い人にはこれが最高。永続ライセンスでずっと使える！

 

環境設定

 

  • 環境設定
    マウスのホイールを逆に変更
  • ターミナル
    色変更
  • 時刻
    日付表示
  • 入力でEnter2回押したくない
    【環境設定】→【キーボード】→【入力ソース】→【Windows風のキー操作】
  • ユーザ辞書
    ビジネスメール打つので。
    ・かっこ：「」【】『』 ()
    ・おせ：お世話になっております。金広です。
    ・いか：以下引用にて失礼致します。
    ・ひき：引き続き何卒宜しくお願い申し上げます。
    ・たい：大変恐れながら、
    ・ごか：ご確認頂ければ幸いです。
    ・おつ：お疲れ様です。
    ・けん：find . -type f -not -path “*/vendor/*” | xargs grep “検索したいファイル名”
  • 文字入力のライブ変換
    右上のIMEから無効化できる
  • DNSの設定
    ネットワークから「8.8.8.8」「1.1.1.1」を追加する

 

  • スクリーンショットの保存をjpegにする
    ターミナルを開いて
$ defaults write com.apple.screencapture type jpg

 

  • .icloud拡張子のファイルが自動で作るのを無効化
    環境設定の「iCloud」→「iCloud Drive」の「オプション」を開き、「Macストレージを最適化」のチェックを外す。
    // これをやっておかないとGit管理で困った。

 

スクリーンショット管理

 

DesktopにSSフォルダを作ってから実行！

$ defaults write com.apple.screencapture location ~/Desktop/SS.nosync/;killall SystemUIServer

SSフォルダにスクショがたまります😊

 

ショートカット

  • 削除
    Command + del
  • 検索
    Command + f
    ・次へ移動
    Shift + g
  • スクショ
    Shift + Command + 5
  • フォームのサジェストのデリート
    Shift + fn + del
  • ブラウザの再読み込み
    Command + r
  • すべて選択
    Command + a
  • 全角の数字を半角に変換
    【英数】を2回連続で押す
  • バックスラッシュ\を入力する
    option + ¥
  • 片仮名変換
    fn + F7
  • 全てのウィンドウを最小化
    option + Command + H + M
    ※WindowsのWindowsキー + Dに相当
  • Dockを別ディスプレイに移動させる
    移動させたいディスプレイの画面最下部にカーソルをぐぐっと押し込む
  • 拡大表示
    Shift + Command 押しながら+
  • 縮小表示
    Command 押しながら-

 

※delはEnter上の❎を表しています。

 

 

iCloudの活用

デスクトップと書類(Documents)が対象になる。

 

開発プロジェクトがiCloudと同期するとGitで無駄なファイルがでやすくてよくない。

  • develop.nosync
    Gitプロジェクトを配置
  • doc
    プロジェクト毎の書類。SSH鍵ファイルなど
  • SS.nosync
    スクリーンショット置き場

.nosyncをつけるとiCloudの同期対象からはずすことができます。

 

SSH接続

Teratermみたいなのがないのだが。。

SSH

$ ssh -p <ポート番号> -i "$HOME/Documents/secret/secret.pem" <ユーザ名>@xxx.xxx.xxx.xxx
$ ssh <ユーザ名>@xxx.xxx.xxx.xxx

 

rsync

$ rsync -arv -e "ssh -p <ポート番号> -i $HOME/Documents/secret/secret.pem" <ユーザ名>@xxx.xxx.xxx.xxx:/var/www/vhosts/ $HOME/Documents/vhosts/

 

 

Mac + Docker + Laravel

自分用に書いています。壊れたらすまん。

 

Homebrewのインストール

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

rmでゴミ箱機能を利用する, lsコマンドの色付け

$ brew install rmtrash

エイリアスの設定

$ vi ~/.bashrc


PS1="\W $ "

+ alias rm -rf='rmtrash'
+ alias rm='rmtrash'
+ alias ls='ls -G'

よし！

 

wget

$ brew install wget

 

Nmap

$ brew install nmap

 

htop

$ brew install htop

 

Nodejs

$ brew install nodebrew

 

$ nodebrew -v

nodebrew 1.0.1

 

$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
$ nodebrew list

v12.10.0

current: none

 

$ nodebrew use v12.10.0
use v12.10.0

 

$ ls $HOME/.nodebrew/current/bin
node     nodebrew npm      npx

 

$ echo 'export PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bash_profile

 

$ cat ~/.bash_profile

if [ -f ~/.bashrc ]; then
  . ~/.bashrc
fi

export PATH="/usr/local/opt/mysql-client/bin:$PATH"
export COMPOSE_HTTP_TIMEOUT=200
export PATH=$PATH:$HOME/.nodebrew/current/bin ←●追記された！！

 

シェルの再起動

$ exec $SHELL -l

 

バージョンの確認

$ npm -v
6.10.3

$ node -v
v12.10.0

 

 

 

 

MySQL Client

$ brew install mysql-client

 

MySQL ClientとDocker-composeの環境変数を追加

$ vi $HOME/.bash_profile


if [ -f ~/.bashrc ]; then
  . ~/.bashrc
fi

+ export PATH="/usr/local/opt/mysql-client/bin:$PATH"
+ export COMPOSE_HTTP_TIMEOUT=200

docker-composeでの操作でのタイムアウトエラーを抑制します。

 

反映させる

$ source ~/.bash_profile

 

Redisクライアント

＄ brew install redis

redis-serverも入るが、目当てのredis-cliコマンドも使えるようになる。

 

 

PHP

PHP確認

$ php --version
PHP 7.1.23 (cli) (built: Feb 22 2019 22:19:32) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2018 Zend Technologies

デフォルトでPHP7.1が入ってる。

 

＄ brew install php

 

$ php --version

PHP 7.3.8 (cli) (built: Aug  6 2019 23:15:07) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.8, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.8, Copyright (c) 1999-2018, by Zend Technologies

PHP7.3に上がった。

 

XDebug

$ pecl install xdebug

 

# cp /usr/local/etc/php/7.3/php.ini /usr/local/etc/php/7.3/php.ini.org

 

# vi /usr/local/etc/php/7.3/php.ini

zend_extension="xdebug.so"
+ xdebug.remote_enable=1
+ xdebug.remote_autostart=1
[PHP]

 

VS CodeでPHP Debugをインストール
https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug

 

モジュールの確認

# php -m

[PHP Modules]
bcmath
bz2
calendar
Core
ctype
curl
date
dba
dom
exif
fileinfo
filter
ftp
gd
gettext
gmp
hash
iconv
intl
json
ldap
libxml
mbstring
mysqli
mysqlnd
odbc
openssl
pcntl
pcre
PDO
pdo_dblib
pdo_mysql
PDO_ODBC
pdo_pgsql
pdo_sqlite
pgsql
Phar
phpdbg_webhelper
posix
pspell
readline
Reflection
session
shmop
SimpleXML
soap
sockets
sodium
SPL
sqlite3
standard
sysvmsg
sysvsem
sysvshm
tidy
tokenizer
wddx
xdebug
xml
xmlreader
xmlrpc
xmlwriter
xsl
Zend OPcache
zip
zlib

[Zend Modules]
Xdebug
Zend OPcache

だいたい入った。

 

 

Composerインストール

＄ curl -sS https://getcomposer.org/installer | php
$ mv composer.phar /usr/local/bin/composer

 

 

SSHの鍵作成

$ ssh-keygen -t rsa

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/kanehiro/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/kanehiro/.ssh/id_rsa.
Your public key has been saved in /Users/kanehiro/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:LZW/tigflRc03LE8a9cA1lOa298KfXs5QeuzEpFSYVw kanehiro@kanehironoMacBook-Air.local
The key's randomart image is:
+---[RSA 2048]----+
|            +==Eo|
|           o.==+o|
|          o . *= |
|         o o + *+|
|        S . = =o=|
|         . . =.o+|
|          . + + *|
|        .  + + Bo|
|         oo . oo=|
+----[SHA256]-----+

フォルダが作りたかっただけ。

 

$ ls -laht ~/.ssh

total 24
-rw-r--r--   1 kanehiro  staff   418B  8 28 22:06 id_rsa.pub
drwx------   5 kanehiro  staff   160B  8 28 22:06 .
-rw-------   1 kanehiro  staff   1.8K  8 28 22:06 id_rsa
-rw-r--r--   1 kanehiro  staff   757B  8 28 20:26 known_hosts
drwxr-xr-x+ 26 kanehiro  staff   832B  8 28 18:20 ..

 

既存の鍵を貼り付ける

# vi $HOME/.ssh/id_rsa_GitHub

-----BEGIN RSA PRIVATE KEY-----

・・・

-----END RSA PRIVATE KEY-----

 

GitHubに接続する為の設定

$ vi $HOME/.ssh/config


Host github.com
    User git
    Port 22
    HostName github.com
    IdentityFile ~/.ssh/id_rsa_GitHub
    IdentitiesOnly yes
    Compression yes

 

権限設定

$ chmod 400 $HOME/.ssh/config
$ chmod 600 $HOME/.ssh/id_rsa_GitHub

 

開発用ディレクトリ作成とLaravelインストール

$ mkdir -p $HOME/Documents/develop/Laravel-test/

Laravel-testというディレクトリにしましたがお好みで。

 

GitHubからCloneする(私のみ利用可能)

$ git clone https://github.com/yuukanehiro/Docker-Stack.git
$ rsync -arv $HOME/Documents/develop/Docker-Stack/Laravel-LEMP-phpMyAdmin-Redis/src/ $HOME/Documents/develop/Laravel-test/
$ cd $HOME/Documents/develop/Laravel-test/laravel/

Cloneはできませんが、httpでダウンロードできます。

 

適宜編集してください。そのままでも動きます。

$ vi $HOME/Documents/develop/Laravel-test/env/.env.local

APP_NAME=app
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

## ログチャネル 開発：develop 本番:production
LOG_CHANNEL=develop


## MySQL
DB_CONNECTION=mysql
DB_HOST=mysql80
DB_PORT=3306
DB_DATABASE=appdb
DB_USERNAME=root
DB_PASSWORD=secret

# Master
DB_MASTER_HOST=mysql80
DB_MASTER_PORT=3306

# Slave(Read)
DB_SLAVE_HOST=mysql80
DB_SLAVE_PORT=3306


## SendGrid
#SENDGRID_API_KEY=<●SendGridAPIキー>
#MAIL_HOST=smtp.sendgrid.net
#MAIL_PORT=587
#MAIL_FROM_ADDRESS=no-reply@example.net
#MAIL_FROM_NAME=自動送信メール
#MAIL_ENCRYPTION=tls


## Redis
CACHE_DRIVER=redis
SESSION_DRIVER=redis
REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379
REDIS_READ_WRITE_TIMEOUT=60

 

＄ sh hard_update.sh

 

 

 

Restart

docker stop $(docker ps -q)
docker rm $(docker ps -q -a)
docker rmi $(docker images -q)

sh hard_update.sh

※追記 こっちの方が良いよね

docker-compose down --rmi all --volumes
sh hard_update.sh

 

特定のコンテナを作り直す

$ docker-compose build --no-cache php-fpm

 

 

Docker on Macでの不具合

Docker on CentOSでの開発では出なかったエラーがでるのだが…。

開発環境だし、安定していなくても再起動系の力技でなんとかなっちゃうので。そこまで問題ではないかな？

 

【Docker for Macを再起動】で解決

ERROR: An HTTP request took too long to complete. Retry with --verbose to obtain debug information.
ERROR: for schemaspy  Cannot start service schemaspy: error while creating mount source path '/Users/kanehiro/Documents/develop/Laravel-api/laravel/schemaspy': mkdir /Users/kanehiro/Documents/develop/Laravel-api/laravel/schemaspy: device or resource busy
ERROR: Encountered errors while bringing up the project.

 

【イメージの再生成, コンテナを立ち上げ直す】で解決

$ php-fpm $ docker exec -it bd2d26f1a629 bash

OCI runtime exec failed: exec failed: container_linux.go:345: starting container process caused "chdir to cwd (\"/app\") set in config.json failed: no such file or directory": unknown

 

イメージを削除して、改めてダウンロードしてコンテナを立ち上げることで対応

docker stop $(docker ps -q)
docker rm $(docker ps -q -a)
docker rmi $(docker images -q)

sh hard_update.sh

 

 

@see

 

関連記事 - More from my site -

Amazonおすすめ

iPad 9世代 2021年最新作

iPad 9世代出たから買い替え。安いぞ！🐱 初めてならiPad。Kindleを外で見るならiPad mini。ほとんどの人には通常のiPadをおすすめします＞＜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）