phpとvue.jsの環境構築

phpとvue.jsの環境構築
こんにちは、きょぱです。
phpの環境構築と、vue.jsの環境構築を実際に実施して見ました。

php環境構築

そもそもWebアプリケーションで必要のものは最低限この3つが必要です
1Webサーバー(Apache,xginx)など
2データベース (mysql)など
3webプログラミング言語(php,ruby)など
これらのソフトウェアは個別で作成されているためそれぞれインストールする必要があります。
XAMPP(ザンプ)という便利なソフトウェア (apache,mysql,php,periなどが入っているもの)
もありますが、個別でこの3つの他にも色々ソフトウェアをインストールして環境構築して行きます。
1 vagrant , virtualboxをインストール
今回は仮想環境のvagrantを使用しちゃいます!
2boxの選択
今回は、bento/ubuntu-16.04を選択
vagrant init bento/ubuntu-16.04
これでvagrantfileが作成されます。確認してださい。
vimでconfig.vm.network “private_network”, ip: “192.168.33.10”文をコメントアウトから外す。
その後upとsshで起動する。
vagrant up
vagrant ssh
nginx,php,mysqlのインストール
sudo apt-get update
sudo apt-get install nginx php-fpm
sudo apt-get install mysql-server mysql-client
sudo apt-get install php-mysql
sudo apt-get install php-mbstring (文字コードの変更やマルチバイト文字列関連の関数を使うときに必要)
phpのパッケージ管理ツールであるComposerを導入
sudo apt-get install curl

vue.js環境構築

 

今回はdockerも使用したいと思います。

dockerとは

一言でいえばコンテナ型の仮想環境を作成、配布、実行するためのプラットフォームです

メリット

  1. マックのOS環境ではなくdockerという仮想環境の中で開発可能
  2. ローカル環境の統一
  3. 本番環境でも運用可能

などです。

マックの環境が壊れる恐れがあるのならば、dockerで開発すればいい

ローカル環境を統一して複数人の開発にも適している。

同じローカル環境を準備してやれば、phprubyのバージョンも合わせられる

これは非常に便利ですし、dockerは流行りなので是非習得するべきです!

(筆者は使いこなせないです笑)

 

1node-vでnodeが入っているか確認

2vue.jsの環境を整える

3docker-compose up -dを実行

4docker-compose exec app bash

bashが使えなかったのでshで

5docker-compose exec app sh

dockerが起動した!!

しかしローカルホスト8080は使えない

6docker-compose.ymlに

ports:”8080:8080″ を記述しなければ8080はdocker内で使えない見たい

記述した後git diffで差分を確認

再び

7docker-compose up -d

8docker-compose exec app sh

dockerが起動したのを確認して

9 npm run dev

ブラウザで確認できました。