[Environment construction (step debugging)] Windows10 VirtualBox Vagrant centOS7 (GUI) LAMP environment (Linux Apache MySQL [Mariadb] PHP) Laravel

10 minute read

Purpose

The following environment is built, and the process until debugging and step execution with VS code (Visual Studio Code) can be performed is described including the meaning as a memorandum.
I wonder if it will be a reference for those who want to build a similar environment. ..

For those who want to modify the source with VS code on centOS and create an environment where development can be done while debugging (stepping) with Chrome on Windows 10.

Windows10
VirtualBox / Vagrant
- centOS7(GUI)
  –LAMP environment
  - Linux
  - Apache
  - MySQL（Mariadb）
  - PHP
  - Laravel

Procedure / Table of Contents

Build centOS7 by modifying vagrantfile
Japaneseize centOS7
LAMP environment construction
Download VS code (Visual Studio Code)
Laravel environment construction
Try running Laravel under Apache
There is a problem that only the welcom route can be issued! !!
Install xdebug
Set debug settings with VS code (Visual Studio Code)
Other convenient settings, etc.
-Allow terminal to be started by shortcut
-Set terminal to dark mode
-Disable middle mouse button

Implementation

1. 1. Build centOS7 by modifying vagrantfile

First, create a centOS environment to prepare the LAMP environment.

Operation on the Windows 10 side

From here, type the command. I used PowerShell.
I think you can use git bath.

Create a folder for centos in a suitable place

mkdir hoge

Enter the folder created by the cd command

cd hoge

Create (initialize) vagrantfile

vagrant init

Rewrite vagrantfile

Rewrite the following file
「hoge/Vagrantfile」

For reference, the following is the vagrantfile I created.

The memory is 8GB and the number of cores is 4.
Please adjust according to the specifications of the PC you are using.
My PC has 32GB of memory and 8 cores.
In addition, you can change various settings, but in this article, we will describe it based on the following conditions.

# -*- 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"
  #network
  config.vm.network "private_network", ip: "192.168.33.10"
  #File sharing
  config.vm.synced_folder "data", "/vagrant_data"

  config.vm.provider "virtualbox" do |vb|
    #Show VirtualBox GUI when booting machine
    vb.gui = true
    #Memory to allocate(MB)
    vb.memory = "8192"
    #Number of CPUs
    vb.cpus = 4
    #Clipboard settings (copy and paste settings)
    vb.customize ["modifyvm", :id, "--clipboard", "bidirectional"]
    #Drag and drop settings
    vb.customize ["modifyvm", :id, "--draganddrop", "bidirectional"]
  end

  config.vm.provision "shell", inline: <<-SHELL
    #GUI installation
    sudo yum -y groupinstall "GNOME Desktop"
    #High quality additional package set for Linux
    sudo yum -y epel-release
    #Set the GUI to start by default
    sudo systemctl set-default graphical.target
    systemctl get-default
    #Install Japanese related packages
    sudo yum -y install ibus-kkc vlgothic-*
    #Japanese locale installation
    sudo yum reinstall -y glibc glibc-common
    #Reboot
    sudo shutdown -r now
  SHELL
end

Create data folder
- It will be a shared folder on the centOS side and the Windows side.
  (If you changed the file name, don’t forget to change the vagrantfile side)
- If you do not make it, you will get angry with an error, so be sure to make it

mkdir data

Launch the environment described in the vagrantfile
- This procedure takes a few minutes. Let’s take a break.

vagrant up

2. Japanese localization of centOS7

Operation on the centos7 side

1. Select “ Japanese / Kana / Kanji ” on the selection screen when you first open it.

The screen looks like this.

Select Application> System Tools> Settings settings in the upper left
1. Input Sources “japanese” is set
  * If you select “Japanese (Japanese)” on the first screen, select “Japanese / Kana / Kanji (Japanese (kana kanji))”.
Change the menu bar throat to Japanese
- From here, use the terminal.

Launch terminal
Applications> System Tools> Terminal in the upper right

Terminal operation

1. Modify “.bash_profile”

Move to home directory

cd

Fixed with vi command

vi .bash_profile

initial state

# .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

Added the following two lines

LANG=ja_JP.UTF-8
 
export LANG

↓ Result

# .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

Operations on windows10 side

restart vagrant

vagrant reload

Operation on the centos7 side

If you log in after rebooting
You will be asked “Do you want to update the name of the standard folder to the current one?”
Select “Update Name”
キャプチャ_2020年10月11日_ディレクトリ名変更しますか？.png

3. 3. LAMP environment construction

The base will be built based on the following.
https://qiita.com/apricotcomic/items/e0e44515e9bb371bcfeb

Addition of the procedure of the above URL

I will add the places where I went and got stuck below.

1. Install Apache

On the way
I will not talk about “Launch a virtual machine and launch NETWORK MANAGER.”

Please proceed to the next step without typing the following command.
Please read from “apache access confirmation”.

nmtui

Since the above is not done, the address of “apache access confirmation” is as follows.
http://192.168.33.10/

Please execute the following command as the root user

usermod -aG apache [user ID]

2. Allow you to connect to MariaDB

Execute the command as the root user.

3. Install php

I think the following is “/etc/yum.repos.d/epel.repo”, so
Change enabled in /etc/yum.repos.d/epel-repo from 1 to 0 so that you don’t care about EPEL automatically when yum runs.

Install the Remi repository

I could not do it with the following Qiita command, so please download it referring to the following site.
https://www.kakiro-web.com/linux/remi-install.html

(Excerpt is below)
Download Remi’s repository configuration package
Execute the following command to download the Remi repository configuration package.

The URL of the download source has a link on the official website of Remi.

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

Remi repository installation
Execute the following command to install Remi’s repository configuration package.

rpm -Uvh remi-release-7.rpm

Although it is mentioned in the quotation,

You now have Linux, Apache, MariaDB and PHP.

Thank you for your hard work, the construction of the LAMP environment is complete.

4. Download VS code (Visual Studio Code)

Download referring to the following site
https://qiita.com/kusanoiskuzuno/items/c323446f2707f9950ebb

Put the plugin you want to use in vscode

By the way, I did it with “Download 1- (1) rpm”.

5. Laravel environment construction

Basically, please refer to the following site
https://qiita.com/apricotcomic/items/9b25a4447a1a8bffc9ca

Addition of the procedure of the above URL

I will add the places where I went and got stuck below.

Command to check the operating environment

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

Execution result

ctype
json
openssl
tokenizer

Install PDO, cbmath, xml, to

I get an error if there is no such option
→ There is a typo in the command, so change it

The space is full-width

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

　↓

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

It is pfp

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

　↓

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

It is pfp

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

　↓

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

It is pfp

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

　↓

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

It is difficult to discover typos. ..

Check again
Command to check the operating environment

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

result

bcmath
ctype
json
mbstring
openssl
PDO
tokenizer
xml

Install Composer

I couldn’t do it well, so download it referring to the following site
https://qiita.com/quicksort/items/f44d996cefa881b1a938

Install Laravel

We will do it separately, so we will not do it here.

This completes the creation of the Laravel environment!
thank you for your hard work. And a little.

6. Try running Laravel under Apache

Apache is under the hierarchy of “/ var / www / {○○}” ○○.

Next, we will build with reference to the following site
https://qiita.com/apricotcomic/items/c102bafbe6dd482dbc89

Addition of the procedure of the above URL

I will add the places where I went and got stuck below.

Install Laravel under apache

The command is executed by the root user

Version and project name are arbitrary

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

The following happened without exception in my environment, so please execute the following command

[error contents]
The stream or file "/var/www/laratest/storage/logs/laravel-2019-08-10.log" could not be opened: failed to open stream: Permission denied」
↑ I get an error message like this.

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"

The above command alone did not work, so please review the permissions.
Execute the following command in the “/ var / www / laratest” directory

sudo chmod -R 775 .

Also, don’t forget to disable SELinux below.
https://qiita.com/hanaita0102/items/5d3675e4dc1530b255ba

Laravel will be displayed at the URL below!
http://192.168.33.10/

This completes the basic environment construction! !! !! !!
Thank you for your hard work! !!

7. There is a problem that only the welcom route can be issued

I added the following to “routes / web.php” and displayed “/ hello”, but an error occurred.

If there is no problem, please skip it.

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

[error contents]
centos7 laravel Not Found The requested URL /hello was not found on this server.

I solved it on the following site.
http://fksk.hatenablog.com/entry/2017/12/20/005940

As a result, the settings in httpd.conf were not good.

If you encounter the same problem, please do the following.

If you add the following, it will be the expected movement.

Add to the “/ etc / httpd / conf” file

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

8. Install Xdebug

First, install xdebug by referring to the following site.
https://itwave.biz/?p=145

Please run the following command

Install xdebug

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

Package confirmation

Method ①

rpm -qa | grep xdebug

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

Method ②

yum list | grep xdebug

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

Method ③
You can also check the PHP version

php -v

9. Set debugging with VS code (Visual Studio Code)

We will set it referring to the following site.
https://qiita.com/diconran/items/6caed6b15cdda23c9933

If you have not installed the following packages in VS code, please do so.
PHP Debug

1. 1. Click the red arrow

2. Click the red arrow

3. 3. Click the red arrow

Add the following to launch.json

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

[result]

{
    //You can use IntelliSense to learn the available attributes.
    //Hover and display the description of existing attributes.
    //Check the following for more information: 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
        }
    ]
}

4. Add to the following file

Modification target:
centos7
/etc/php.d/15-xdebug.ini

Make the session start automatically

xdebug.remote_autostart = false

↓ Change to the following

xdebug.remote_autostart = 1

Enable remote debugging

xdebug.remote_enable = false

↓ Change to the following

xdebug.remote_enable = 1

Change the host name of the connection destination

xdebug.remote_host = localhost

↓ Change to the following

xdebug.remote_host = 192.168.33.10

5. Press “F5” to set a debug breakpoint (red circle) and try it out

Debugging has stopped! !!
You are now ready to step debug.

Thank you for your hard work.

10. Other convenient settings, etc.

Allow the terminal to be launched with a shortcut

Operation on the centos7 side

Applications> System Tools> Settings> Devices> Keyboard
Scroll to the bottom

Press the “+” button

Name: Start terminal (arbitrary wording)
Command: gnome-terminal (confirmed wording)
Shortcut setting…: ctrl + alt + T (arbitrary key)

Press the “Add” button

Put the terminal in dark mode

Open the terminal

Click “Terminal” on the menu bar
Open “Settings”

General → Theme
“Default” → “Dark”

Disable middle mouse button

Please refer to the following site
https://www.virment.com/thinkpad-ubuntu-how-to-disable-middle-button-paste/

Open a terminal and execute the following command

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)]

Below are the mouse related settings.

 ImExPS/2 Generic Explorer Mouse

Enter the following command referring to the above.

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

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

Since the “middle button” is the location of 2, change “2” to “0”.

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

By the way, you can use it by returning from “0” to “2”.

Reference site

It was very helpful.
Thank you very much.

https://www.kakiro-web.com/linux/remi-install.html
https://itwave.biz/?p=145
https://qiita.com/apricotcomic/items/e0e44515e9bb371bcfeb
https://qiita.com/kusanoiskuzuno/items/c323446f2707f9950ebb
https://qiita.com/apricotcomic/items/9b25a4447a1a8bffc9ca
https://qiita.com/quicksort/items/f44d996cefa881b1a938
https://qiita.com/apricotcomic/items/c102bafbe6dd482dbc89
https://qiita.com/hanaita0102/items/5d3675e4dc1530b255ba
https://qiita.com/diconran/items/6caed6b15cdda23c9933

Twitter Facebook LinkedIn

Purpose

Procedure / Table of Contents

Implementation

1. 1. Build centOS7 by modifying vagrantfile

First, create a centOS environment to prepare the LAMP environment.

Operation on the Windows 10 side

2. Japanese localization of centOS7

Operation on the centos7 side

Operations on windows10 side

Operation on the centos7 side

3. 3. LAMP environment construction

Addition of the procedure of the above URL

1. Install Apache

2. Allow you to connect to MariaDB

3. Install php

Install the Remi repository

4. Download VS code (Visual Studio Code)

5. Laravel environment construction

Addition of the procedure of the above URL

Install PDO, cbmath, xml, to

The space is full-width

It is pfp

It is pfp

It is pfp

Install Composer

Install Laravel

6. Try running Laravel under Apache

Addition of the procedure of the above URL

Install Laravel under apache

7. There is a problem that only the welcom route can be issued

As a result, the settings in httpd.conf were not good.

8. Install Xdebug

9. Set debugging with VS code (Visual Studio Code)

1. 1. Click the red arrow

2. Click the red arrow

3. 3. Click the red arrow

4. Add to the following file

Make the session start automatically

Enable remote debugging

Change the host name of the connection destination

5. Press “F5” to set a debug breakpoint (red circle) and try it out

10. Other convenient settings, etc.

Allow the terminal to be launched with a shortcut

Operation on the centos7 side

Put the terminal in dark mode

Disable middle mouse button

Reference site

You May Also Enjoy

[Introduction] A collection of carefully selected links from how to get started on GitHub to how to solve errors when you encounter an error on Git.

Publish IP camera videos on web pages

I tried to easily put CentOS-7 in a PC that I no longer need

Apparently CentOS doesn’t have a terminal shortcut