Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@returnTrue

【環境構築(ステップデバッグ)】Windows10 VirtualBox Vagrant centOS7(GUI) LAMP環境(Linux Apache MySQL[Mariadb] PHP) Laravel

Last updated at Posted at 2020-10-11

目的

下記の環境構築を行い、VS code(Visual Studio Code)でデバッグ、ステップ実行ができるようになるまでを備忘録としての意味合いも含め記載します。
同じような環境を構築したい方への参考になるかと。。

centOS上のVS codeでソースを修正し、Windows10のChromeでデバッグ（ステップ実行）しながら開発ができるような環境を作りたい方向けです。

  • Windows10
  • VirtualBox / Vagrant
    • centOS7(GUI)
      • LAMP環境
      • Linux
      • Apache
      • MySQL（Mariadb）
      • PHP
      • Laravel

手順・目次

　１. centOS7をvagrantfileを修正して構築
　２. centOS７を日本語化
　３. LAMP環境構築
　４. VS code(Visual Studio Code)をダウンロード
　５. Laravelの環境構築
　６. Apache配下でLaravelを動かしてみる
　７. welcomのルート以外が出せない問題が発生！！
　８. xdebugのインストール
　９. VS code(Visual Studio Code)でデバッグの設定をする
１０. その他の便利設定など
　ーターミナルをショートカットで起動できるようにする
　ーターミナルをダークモードにする
　ーマウスの中ボタンを無効にする

#実施

##１．centOS7をvagrantfileを修正して構築
###まずは、LAMP環境を整えるためのcentOSの環境を作ります。

Windows10側の操作

※ここから、コマンドを打ちます。私はPowerShellを使用しました。
※git bathとかでもよいと思います。

１. 適当なところにcentos用のフォルダを作成

mkdir hoge

２. cdコマンドで作成したフォルダに入る

cd hoge

３. vagrantfileを作成(初期化)

vagrant init

４．vagrantfileを書き換え

下記のファイルを書き換えます
「hoge/Vagrantfile」

参考までに下記は私が作成したvagrantfileです。

メモリを8GB、コア数4にあげています。
使用しているPCのスペックに合わせて調節してください。
私のPCはメモリ：32GB、コア数：8です。
その他、いろいろと設定を変更できますが、この記事では下記の条件をもとに記載していきます。

# -*- mode: ruby -*-
# vi: set ft=ruby :

VAGRANTFILE_API_VERSION = "2"
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
  # OS
  config.vm.box = "centos/7"
  # TimeZone
  config.vm.provision "shell", inline: "timedatectl set-timezone Asia/Tokyo"
  # ネットワーク
  config.vm.network "private_network", ip: "192.168.33.10"
  # ファイル共有
  config.vm.synced_folder "data", "/vagrant_data"

  config.vm.provider "virtualbox" do |vb|
    # マシンの起動時にVirtualBoxGUIを表示する
    vb.gui = true
    # 割り当てるメモリー(MB)
    vb.memory = "8192"
    # CPUの数
    vb.cpus = 4
    # クリップボードの設定（コピペ設定）
    vb.customize ["modifyvm", :id, "--clipboard", "bidirectional"]
    # ドラッグ＆ドロップ設定
    vb.customize ["modifyvm", :id, "--draganddrop", "bidirectional"]
  end

  config.vm.provision "shell", inline: <<-SHELL
    # GUIのインストール
    sudo yum -y groupinstall "GNOME Desktop"
    # Linux用の高品質な追加パッケージセット
    sudo yum -y epel-release
    # デフォルトでGUIが起動するように設定
    sudo systemctl set-default graphical.target
    systemctl get-default
    # 日本語関連のパッケージをインストール
    sudo yum -y install ibus-kkc vlgothic-*
    # 日本語ロケールのインストール
    sudo yum reinstall -y glibc glibc-common
    # 再起動
    sudo shutdown -r now
  SHELL
end

５．dataフォルダを作成
※centOS側とWindows側の共有フォルダになります。
（ファイル名を変更した方はvagrantfile側の変更も忘れずに）
※作らないとエラーで怒られますので、作成はかならず

mkdir data

６．vagrantfileに記載した環境を立ち上げます
※この手順は数分かかります。一服しましょう。

vagrant up

## ２．centOS７を日本語化 ####centos7側の操作 １．最初に開いたときの選択画面で「日本語/かな/漢字」を選択

※こんな感じの画面です。
image_thumb73.png

２．左上の(Application)アプリケーション > System Tools(システムツール) > (Settings)設定を選択

３．Input Sources　「japanese」を設定
※最初の画面で「日本語(Japanese)」を選んだ場合は、「日本語/かな/漢字(Japanese(kana kanji))」を選んでください
キャプチャ_2020年10月11日_サイズ変更.png

４．メニューバーなのどを日本語に変更する
※ここから、ターミナル（端末）を利用します

ターミナルを起動
右上のApplications > System Tools > Terminal

ターミナル操作

１．「.bash_profile」を修正します

homeディレクトに移動

cd

viコマンドで修正

vi .bash_profile

初期状態

# .bash_profile
 
# Get the aliases and functions
if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi
 
# User specific environment and startup programs
 
PATH=$PATH:$HOME/bin
 
export PATH

※下記２行を追加

LANG=ja_JP.UTF-8
 
export LANG

↓結果

# .bash_profile
 
# Get the aliases and functions
if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi
 
# User specific environment and startup programs
 
PATH=$PATH:$HOME/bin
 
export PATH
 
LANG=ja_JP.UTF-8
 
export LANG

#### windows10側の操作

vagrantの再起動

vagrant reload

####centos7側の操作 再起動後にログインすると、 「標準フォルダーの名前を現在の言語に合わせて更新しますか？」と聞かれるので、 「名前を更新する」を選択 ![キャプチャ_2020年10月11日_ディレクトリ名変更しますか？.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764570/eff61fb7-174f-342a-9841-e198c0671291.png)

##３．LAMP環境構築
ベースは、下記をもとに構築していきます。
https://qiita.com/apricotcomic/items/e0e44515e9bb371bcfeb

###上記のURLの手順の追記
※私が行っていて、つまったところなどを下記に追記します。

####1.Apacheをインストールする

途中にある
「仮想マシンを立ち上げてNETWORK MANAGERを立ち上げる。」については、今回はしません。

※下記コマンドを打って操作するところは、せずに次に進んでください。
「apacheアクセス確認」から読み進めてください。

nmtui

上記をしないので、「apacheアクセス確認」のアドレスは下記です。
http://192.168.33.10/

下記コマンドはルートユーザで行ってください

usermod -aG apache [ユーザーID]

####2.MariaDBに接続できるようにする

コマンドはルートユーザで行ってください。

####3.phpをインストールする

下記は、「/etc/yum.repos.d/epel.repo」のことだと思いますので、
/etc/yum.repos.d/epel-repo内のenabledを1から0に変更し、yum実行時自動で気にEPELを使用しないように変更してください。

####Remiレポジトリをインストールする

下記Qiitaのコマンドだとできなかったため、下記サイトを参考にダウンロードをしてください。
https://www.kakiro-web.com/linux/remi-install.html

（抜粋すると下記です）
Remiのリポジトリ設定パッケージをダウンロード
以下のコマンドを実行して、Remiのリポジトリ設定パッケージのダウンロードを行います。
※ダウンロード元のURLは、Remiの公式サイトにリンクがあります。

wget http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

Remiのリポジトリのインストール
以下のコマンドを実行して、Remiのリポジトリ設定パッケージのインストールを行います。

rpm -Uvh remi-release-7.rpm

引用先でも記載ありますが、

これでLinux,Apache,MariaDB,PHPが揃いました。

お疲れ様です、ここまででLAMP環境構築完了です。

４．VS code(Visual Studio Code)をダウンロード

下記サイトを参考にダウンロード
https://qiita.com/kusanoiskuzuno/items/c323446f2707f9950ebb

使用したいプラグインをvscodeに入れておく

※ちなみに私は、「1-(1) rpmをダウンロード」で行いました。

##５．Laravelの環境構築

基本的に下記サイトを参考に実施してください
https://qiita.com/apricotcomic/items/9b25a4447a1a8bffc9ca

###上記のURLの手順の追記
※私が行っていて、つまったところなどを下記に追記します。

動作環境を確認するのコマンド

php -m | grep -e openssl -e PDO -e mbstring -e tokenizer -e^xml$ -e ctype -e json -e bcmath

実行結果

ctype
json
openssl
tokenizer

####PDO,cbmath,xml,toをインストールする
そんなオプションはないとエラーが出る
→コマンドにタイポがあるので変更する

#####スペースが全角になっている

yum install　--enablerepo=remi,remi-php73 -php-pdo

　↓

yum install --enablerepo=remi,remi-php73 php-pdo

#####pfpになっている

yum install --enablerepo=remi,remi-pfp73 php-bcmath

　↓

yum install --enablerepo=remi,remi-php73 php-bcmath

#####pfpになっている

yum install --enablerepo=remi,remi-pfp73 php-bcmath

　↓

yum install --enablerepo=remi,remi-php73 php-bcmath

#####pfpになっている

yum install --enablerepo=remi,remi-pfp73 php-xml

　↓

yum install --enablerepo=remi,remi-php73 php-xml

※タイポって発見するの大変。。

再度確認
動作環境を確認するのコマンド

php -m | grep -e openssl -e PDO -e mbstring -e tokenizer -e^xml$ -e ctype -e json -e bcmath

結果

bcmath
ctype
json
mbstring
openssl
PDO
tokenizer
xml

###Composerをインストールする
うまくできなったので、下記サイトを参考にダウンロード
https://qiita.com/quicksort/items/f44d996cefa881b1a938

###Laravelをインストールする
※別途行うので、ここではやりません

これで、Laravelの環境も作成完了です！
お疲れ様です。あと、少しです。

##６．Apache配下でLaravelを動かしてみる
※Apacheの配下は、「/var/www/{○○}」○○の階層です。

次は下記サイトを参考に構築していく
https://qiita.com/apricotcomic/items/c102bafbe6dd482dbc89

###上記のURLの手順の追記
※私が行っていて、つまったところなどを下記に追記します。

####Laravelをapache配下にインストールする
コマンドは、ルートユーザで行う

バージョンとプロジェクト名は任意です

composer create-project "laravel/laravel=6.*" laratest

自分の環境も例に漏れずに下記が起こったので、下記コマンドを実施してください

[エラー内容]
The stream or file "/var/www/laratest/storage/logs/laravel-2019-08-10.log" could not be opened: failed to open stream: Permission denied」
↑こんな感じのエラーメッセージが出ます。

semanage fcontext -a -t httpd_sys_rw_content_t "/var/www/laratest/storage"
semanage fcontext -a -t httpd_sys_rw_content_t "/var/www/laratest/bootstrage/cahce"

上記のコマンドだけでは、だめだったのでパーミッションを見直してください。
「/var/www/laratest」のディレクトリで下記コマンドを実行

sudo chmod -R 775 .

あと、下記のSELinuxの無効化をするは忘れずに行ってください。
https://qiita.com/hanaita0102/items/5d3675e4dc1530b255ba

下記URLでLaravelが表示されます！
http://192.168.33.10/

基本の環境構築はこれで終了です！！！！
お疲れ様でした！！

##７．welcomのルート以外が出せない問題が発生
「routes/web.php」に下記を追記し「/hello」を表示してもエラーになってしまいました。
※問題ない方は読み飛ばしてください

Route::get('/hello', function () {
    return 'Hello world!';
});

[エラー内容]
centos7 laravel Not Found The requested URL /hello was not found on this server.

下記サイトで解決しました。
http://fksk.hatenablog.com/entry/2017/12/20/005940

###結果、httpd.confの設定がよくなかったです。
※同じ問題が発生した方は、以下を行ってください。

下記を追加すれば、想定の動きになります。

「/etc/httpd/conf」のファイルに追記する

<Directory "/var/www/laratest">
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

##８．Xdebugのインストール
まずは、下記サイトを参考にxdebugをインストールします。
https://itwave.biz/?p=145
※下記コマンドを流してください

xdebugをインストール

yum --enablerepo=remi-php73 install php-pecl-xdebug

パッケージ確認

方法①

rpm -qa | grep xdebug

[結果]
php-pecl-xdebug-2.7.2-2.el7.remi.7.3.x86_64

方法②

yum list | grep xdebug

[結果]
php-pecl-xdebug.x86_64 2.7.2-2.el7.remi.7.3 @remi-php73

方法③
PHPのバージョン確認でもわかる

php -v

##９．VS code(Visual Studio Code)でデバッグの設定をする

下記サイトを参考に設定していきます。
https://qiita.com/diconran/items/6caed6b15cdda23c9933

※VS codeに下記のパッケージのインストールがまだの方はしてください
PHP Debug

####１．赤矢印の箇所をクリック

image.png

####２．赤矢印の箇所をクリック

image.png

####３．赤矢印の箇所をクリック

image.png

下記をlaunch.jsonに書き足す

"pathMappings": {
        "/var/www/laratest": "${workspaceRoot}"
    }

[結果]

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www/laratest": "${workspaceRoot}"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

####４．下記ファイルに追記する

修正対象：
centos7
/etc/php.d/15-xdebug.ini

#####自動的にセッションが始まるようにする

xdebug.remote_autostart = false

↓下記に変更

xdebug.remote_autostart = 1

#####リモートデバッグを有効にする ``` xdebug.remote_enable = false ```

↓下記に変更

xdebug.remote_enable = 1

#####つなぎ先のホスト名を変更する ``` xdebug.remote_host = localhost ```

↓下記に変更

xdebug.remote_host = 192.168.33.10

####５．「F5」を押して、デバッグのブレークポイント（赤丸）を張って実際に試す

デバッグが止まりました！！
これで、デバッグのステップ実行ができるようになります。
image.png

お疲れ様でした。


##１０．その他の便利設定など

##ターミナルをショートカットで起動できるようにする
####centos7側の操作
アプリケーション > システムツール > 設定 > デバイス > キーボード
一番下まで、スクロール

「+」ボタンを押下

名前：端末起動（任意文言）
コマンド：gnome-terminal（確定文言）
ショートカットの設定…：ctrl + alt + T（任意キー）

「追加」ボタン押下

##ターミナルをダークモードにする

ターミナルを開き

メニューバーの「端末」をクリック
「設定」を開く

全般→テーマ
「デフォルト」→「ダーク」

##マウスの中ボタンを無効にする

下記サイトを参考に行って下さい
https://www.virment.com/thinkpad-ubuntu-how-to-disable-middle-button-paste/

ターミナルを開き、下記コマンドを実行してください

xinput

[vagrant@localhost ~]$ xinput
⎡ Virtual core pointer                    	id=2	[master pointer  (3)]
⎜   ↳ Virtual core XTEST pointer              	id=4	[slave  pointer  (2)]
⎜   ↳ VirtualBox mouse integration            	id=9	[slave  pointer  (2)]
⎜   ↳ ImExPS/2 Generic Explorer Mouse         	id=11	[slave  pointer  (2)]
⎣ Virtual core keyboard                   	id=3	[master keyboard (2)]
    ↳ Virtual core XTEST keyboard             	id=5	[slave  keyboard (3)]
    ↳ Power Button                            	id=6	[slave  keyboard (3)]
    ↳ Sleep Button                            	id=7	[slave  keyboard (3)]
    ↳ Video Bus                               	id=8	[slave  keyboard (3)]
    ↳ AT Translated Set 2 keyboard            	id=10	[slave  keyboard (3)]

下記がマウス関連の設定です。

 ImExPS/2 Generic Explorer Mouse

上記を参考に下記コマンドを入力してください。

xinput get-button-map "ImExPS/2 Generic Explorer Mouse"

[結果]
1 2 3 4 5 6 7 8 9 10 11 12 13

「中ボタン」は、２の場所なので「2」を「0」に変更してください。

xinput set-button-map "ImExPS/2 Generic Explorer Mouse" 1 0 3 4 5 6 7 8 9 10 11 12 13

※ちなみに戻すときは、「0」→「2」に戻せば使えます。

#参考サイト様
とても助かりました。
ありがとうございました。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?