- 投稿日：2019-02-03T23:15:01+09:00
Vagrant + VirtualBoxでMac OS上に仮想環境を構築してPHP を動かす
背景
PHPの開発環境はXAMPPで手っ取り早く構築できますが、今回初めて仮想環境を準備してみてたので備忘録がてらにメモしておきます。
実現したいこと
VagrantとVirtualBoxで仮想環境を構築し、PHPの実装内容をブラウザで確認してみたいと思います。
イメージとしてはこんな感じです。
環境
Mac OS Mojave Version 10.14仮想環境とは
自分のPC内（物理マシン）に、コンピュータ（仮想マシン）を作成して、そこにPHPやRuby、Mysqlといった開発に必要なソフトウェアなどをインストールして動かしたりすることができる環境のことです。
要は、自分のPC上に仮想的に作り上げた本番・テスト環境だと思って下さい。
仮想環境は、
ハイパーバイザ型、ホスト型、コンテナ型の3つに分類されます。
今回VargrantとVirtualBoxで準備するのは、ホスト型と呼ばれる仮想環境です。それぞれの特徴や違いについては、別途まとめたいと思います。とりあえずここでは割愛します。なぜ仮想環境？
結論としては、環境の差異をミニマイズすることができるからです。
例えば、チームで開発・運用を行う場合、一般的には以下のステップで進めていくと思います。
- 開発環境（Development Environment）
- 検証（テスト）環境（Testing Environment）
- ステージング環境（Staging Environment）
- 本番環境（Production Environment）
しかし、各々がこれらの環境構築を手作業で行った場合、環境に差異が生まれることがあり、開発環境では動くのに本番環境では動かないといった問題が生じる可能性があります。
仮想環境による開発では、こうした問題をミニマイズすることができます。仮想環境のメリット
仮想環境による開発のメリットはたくさんあります。要は、効率的に開発を行うことができます。
- 実働・本番環境に合わせたOSが選択できる
- Vagrantコマンド一発で環境の構築・停止・削除・再構築ができる
- ホストマシン（自分のPC）とは独立しているので、ソフトやパッケージのインストールなどを仮想環境で気軽に試せる
- chefなどの設定管理ソフトを導入すれば必要なソフトやライブラリが追加された状態の環境をすぐに作れる
- 設定を共有すれば開発者間で共通の開発環境を構築できる
Vagrantとは
一言でいうと、仮想マシンをコマンドラインで簡単に扱えるようにするツールです。
VirtualBoxとは
Vagrant自体には仮想化の機能はないため、VirtualBoxと呼ばれる仮想環境を構築するためのツール（他にもありますが）を使用します。
セットアップ
まず、VagrantとVirtualBoxを自分のPCにインストールします。インストール自体はそこまで難しくないので、サクッとやっちゃいましょう。
VirtualBoxのインストール
公式サイトからインストーラをダウンロードして実行します。
https://www.virtualbox.org/wiki/DownloadsOS X hostsを選択して、あとはダイアログに指示に従って進めて下さい。
VirtualBoxのバージョン確認
インストールできたかどうか、バージョンを確認します。
$ VBoxManage -v 6.0.4r128413バージョンが表示されていれば、インストール成功です。
VirtualBox Extension Packのインストール
Vagrantを操作するために必要なVirtualBoxの拡張パックををインストールします。
公式サイトのAll supported platformsからインストールします。
こちらもダイアログの指示に従って進めましょう。以下のような状態になっていればインストール成功です。
Vagrantのインストール
公式サイトからインストーラをダウンロードして実行します。
https://www.vagrantup.com/downloads.html
インストール先のマシンのOSとビット数に応じたインストーラが出てくるので、Mac OS X, 64-bit」を選びます。
Vagrantのバージョンの確認
インストールできたかどうか、バージョンを確認します。
$ vagrant --version Vagrant 2.2.3バージョンが表示されていれば、インストール成功です。
仮想環境構築
VagrantとVirtualBoxのセットアップが完了したら、開発環境の構築に移ります。
Vagrant Boxを検索
まず、Vagrant Cloudと呼ばれるVagrantで使えるBoxのクラウドサービスから、仮想環境のベースとなるVagrant Boxを検索します。
https://app.vagrantup.com/boxes/searchVagrant Boxは、仮想マシンのテンプレート(ひな形、ベース)となるファイルです。
例えば、CentOSのBoxをインストールすれば、簡単にCentOS環境を構築することができます。
Vagrant Boxをインストール
以下コマンドでインストール出来ます。
$ vagrant box add [Box名またはURL]実際にインストールしてみましょう。
$ vagrant box add centos/7 ==> box: Loading metadata for box 'centos/7' box: URL: https://vagrantcloud.com/centos/7 This box can work with multiple providers! The providers that it can work with are listed below. Please review the list and choose the provider you will be working with. 1) hyperv 2) libvirt 3) virtualbox 4) vmware_desktop Enter your choice:
Enter your choice：と言うメッセージが表示されるので、今回の場合だとVirtualBoxを利用しているので3)を選択します。
実行するとBoxファイルのダウンロードが始まります。OSイメージなのでサイズもそれなりに大きく、ちょっと時間がかかリます。==> box: Adding box 'centos/7' (v1812.01) for provider: virtualbox box: Downloading: https://vagrantcloud.com/centos/boxes/7/versions/1812.01/providers/virtualbox.box box: Download redirected to host: cloud.centos.org ==> box: Successfully added box 'centos/7' (v1812.01) for 'virtualbox'!Successfully〜と言うメッセージが表示されればOKです。
Vagrant Boxのインストール確認
インストールできたかどうか、以下コマンドで確認します。
$ vagrant box list centos/7 (virtualbox, 1812.01)作業ディレクトリ作成
centos7という作業ディレクトリを作成し、そこに仮想環境を作りたいと思います。要は下準備です。
$ mkdir centos7 $ cd centos7 $ pwd /Users/Username/vagrant/centos7Vagrantfileの作成
下準備ができたら、Vagrantfileを作成します。
Vagrantfileは、仮想マシンを立ち上げる際のconfigやprovision（立ち上げ時自動実行）を記述するファイル です。要は仮想環境の設計図みたいなもので、これを元にどんなPCでも同じような仮想環境を構築できます。
$ vagrant init centos/7Vagrantfileの確認
コマンドを実行すると、Vagrantfileが作成されています。中身はコメントがたくさんあるのですが以下のようになっているはずです。
Vagrant.configure("2") do |config| config.vm.box = "centos/7" end仮想マシンを起動
以下コマンドで仮想マシンを起動させることができます。
$ vagrant up仮想マシンにSSHで接続
仮想マシンの起動が終わると、SSHでシェル接続が可能になります。
$vagrant ssh通常、SSHでの接続にはサーバアドレスやユーザIDの指定などが必要ですが、Vagrantによって立ち上げられた仮想マシンには、vagrant sshコマンドを使って簡単にSSH接続できるようになっています。
Last login: Sun Feb 3 10:17:25 2019 from 10.0.2.2 [vagrant@localhost ~]$このような状態になっていれば、接続完了です。
サーバー構築＠仮想環境
仮想環境の構築が完了した所で、実際に仮想環境上(CentOS)にサーバーを構築していきます。
PHPファイルをブラウザに表示するには、WEBサーバーが必要な為です。ポイントは、VagrantにSSHで接続した状態で実行することです。PHPとApacheのインストール
PHPとApacheをインストールします。
Apacheは、WEBサーバーを構築するWebサーバーソフトウェアというもので、世界中で最も使われているんだとか。$ sudo yum install php $ sudo yum install httpdApacheを入れたら以下のようなディレクトリが作成されます。
/var/www//etc/httpd//var/log/httpd/無事にインストールが完了したら、以下のコマンドを入力します。
$ cd /var/www/html $ sudo vi index.htmlviエディターが開くので、とりあえずindex.htmlの中に
Hello Worldを入力します。<h1>Hello World</h1>
Escapeキーでエディタを閉じて、:wqと打ちます。
wは保存、qは終了を意味します。（もしエラーになる場合は:wq!と打つと確実に終了ができます）Vagrantfileの再設定
exitコマンドで仮想マシンから出て、Vagrantfile（※vagrant initした時作成されたファイル）のネットワークの設定を行い、ローカルから仮想マシンを見れるようにします。$ exit $ vim Vagrantfile# Create a private network, which allows host-only access to the machine # using a specific IP. config.vm.network "private_network", ip: "192.168.33.10"27行目あたりにある、
config.vm.network "private_network", ip: "192.168.33.10"のコメントを外します。（キーボードのxを押して、#を削除したら、Escapeキーでエディタを閉じて、:wqと打ちます）Vagrandを再起動
設定を変えたので、再起動します。
$ vagrant reloadApacheの起動
$ sudo service httpd start192.168.33.10にアクセスして、
Hello Worldが表示されていればOKです。Apacheの設定ファイル編集
本記事のゴールとなる、PHPを表示させるための作業です。（あと一息）
まず、Apacheの設定ファイルを編集します。$ sudo vi /etc/httpd/conf/httpd.conf以下のような記述を探します。
AddType application/x-compress .Z AddType application/x-gzip .gz .tgz上の記述の下に以下の2つを追記します。
AddType application/x-httpd-php .php AddType application/x-httpd-php-source .phpsこれで、Apacheは拡張子がPHPのファイルをPHPプログラムとして処理をしてくれます。
PHPファイルの作成
$ cd /var/www/html $ sudo vi test.phptest.php<html> <body> <?php echo('Hello PHP'); ?> </body> </html>
http://192.168.33.10/test.phpにアクセスし、Hello PHPと表示されたら成功です。
おわりに
今回は、PHPの実装内容をブラウザで確認するまでという簡単な内容でしたが、Chefを使った自動構築だったり、Vagrant上のファイルをVScodeで編集することもできるみたいなので、今後色々調べて試してみたいと思います。
- 投稿日：2019-02-03T23:15:01+09:00
Vagrant + VirtualBoxでMac OS上に仮想環境を構築してPHPを動かす
背景
PHPの開発環境はXAMPPで手っ取り早く構築できますが、今回初めて仮想環境を準備してみてたので備忘録がてらにメモしておきます。
実現したいこと
VagrantとVirtualBoxで仮想環境を構築し、PHPの実装内容をブラウザで確認してみたいと思います。
イメージとしてはこんな感じです。(今回MySQLは触れません)
環境
Mac OS Mojave Version 10.14仮想環境とは
自分のPC内（物理マシン）に、コンピュータ（仮想マシン）を作成して、そこにPHPやRuby、Mysqlといった開発に必要なソフトウェアなどをインストールして動かしたりすることができる環境のことです。
要は、自分のPC上に仮想的に作り上げた本番・テスト環境だと思って下さい。
仮想環境は、
ハイパーバイザ型、ホスト型、コンテナ型の3つに分類されます。
今回VargrantとVirtualBoxで準備するのは、ホスト型と呼ばれる仮想環境です。それぞれの特徴や違いについては、別途まとめたいと思います。とりあえずここでは割愛します。なぜ仮想環境？
結論としては、環境の差異をミニマイズすることができるからです。
例えば、チームで開発・運用を行う場合、一般的には以下のステップで進めていくと思います。
- 開発環境（Development Environment）
- 検証（テスト）環境（Testing Environment）
- ステージング環境（Staging Environment）
- 本番環境（Production Environment）
しかし、各々がこれらの環境構築を手作業で行った場合、環境に差異が生まれることがあり、開発環境では動くのに本番環境では動かないといった問題が生じる可能性があります。
仮想環境による開発では、こうした問題をミニマイズすることができます。仮想環境のメリット
仮想環境による開発のメリットはたくさんあります。要は、効率的に開発を行うことができます。
- 実働・本番環境に合わせたOSが選択できる
- Vagrantコマンド一発で環境の構築・停止・削除・再構築ができる
- ホストマシン（自分のPC）とは独立しているので、ソフトやパッケージのインストールなどを仮想環境で気軽に試せる
- chefなどの設定管理ソフトを導入すれば必要なソフトやライブラリが追加された状態の環境をすぐに作れる
- 設定を共有すれば開発者間で共通の開発環境を構築できる
Vagrantとは
一言でいうと、仮想マシンをコマンドラインで簡単に扱えるようにするツールです。
VirtualBoxとは
Vagrant自体には仮想化の機能はないため、VirtualBoxと呼ばれる仮想環境を構築するためのツール（他にもありますが）を使用します。
セットアップ
まず、VagrantとVirtualBoxを自分のPCにインストールします。インストール自体はそこまで難しくないので、サクッとやっちゃいましょう。
VirtualBoxのインストール
公式サイトからインストーラをダウンロードして実行します。
https://www.virtualbox.org/wiki/DownloadsOS X hostsを選択して、あとはダイアログに指示に従って進めて下さい。
VirtualBoxのバージョン確認
インストールできたかどうか、バージョンを確認します。
$ VBoxManage -v 6.0.4r128413バージョンが表示されていれば、インストール成功です。
VirtualBox Extension Packのインストール
Vagrantを操作するために必要なVirtualBoxの拡張パックををインストールします。
公式サイトのAll supported platformsからインストールします。
こちらもダイアログの指示に従って進めましょう。以下のような状態になっていればインストール成功です。
Vagrantのインストール
公式サイトからインストーラをダウンロードして実行します。
https://www.vagrantup.com/downloads.html
インストール先のマシンのOSとビット数に応じたインストーラが出てくるので、Mac OS X, 64-bit」を選びます。
Vagrantのバージョンの確認
インストールできたかどうか、バージョンを確認します。
$ vagrant --version Vagrant 2.2.3バージョンが表示されていれば、インストール成功です。
仮想環境構築
VagrantとVirtualBoxのセットアップが完了したら、開発環境の構築に移ります。
Vagrant Boxを検索
まず、Vagrant Cloudと呼ばれるVagrantで使えるBoxのクラウドサービスから、仮想環境のベースとなるVagrant Boxを検索します。
https://app.vagrantup.com/boxes/searchVagrant Boxは、仮想マシンのテンプレート(ひな形、ベース)となるファイルです。
例えば、CentOSのBoxをインストールすれば、簡単にCentOS環境を構築することができます。
Vagrant Boxをインストール
以下コマンドでインストール出来ます。
$ vagrant box add [Box名またはURL]実際にインストールしてみましょう。
$ vagrant box add centos/7 ==> box: Loading metadata for box 'centos/7' box: URL: https://vagrantcloud.com/centos/7 This box can work with multiple providers! The providers that it can work with are listed below. Please review the list and choose the provider you will be working with. 1) hyperv 2) libvirt 3) virtualbox 4) vmware_desktop Enter your choice:
Enter your choice：と言うメッセージが表示されるので、今回の場合だとVirtualBoxを利用しているので3)を選択します。
実行するとBoxファイルのダウンロードが始まります。OSイメージなのでサイズもそれなりに大きく、ちょっと時間がかかリます。==> box: Adding box 'centos/7' (v1812.01) for provider: virtualbox box: Downloading: https://vagrantcloud.com/centos/boxes/7/versions/1812.01/providers/virtualbox.box box: Download redirected to host: cloud.centos.org ==> box: Successfully added box 'centos/7' (v1812.01) for 'virtualbox'!Successfully〜と言うメッセージが表示されればOKです。
Vagrant Boxのインストール確認
インストールできたかどうか、以下コマンドで確認します。
$ vagrant box list centos/7 (virtualbox, 1812.01)作業ディレクトリ作成
centos7という作業ディレクトリを作成し、そこに仮想環境を作りたいと思います。要は下準備です。
$ mkdir centos7 $ cd centos7 $ pwd /Users/Username/vagrant/centos7Vagrantfileの作成
下準備ができたら、Vagrantfileを作成します。
Vagrantfileは、仮想マシンを立ち上げる際のconfigやprovision（立ち上げ時自動実行）を記述するファイル です。要は仮想環境の設計図みたいなもので、これを元にどんなPCでも同じような仮想環境を構築できます。
$ vagrant init centos/7Vagrantfileの確認
コマンドを実行すると、Vagrantfileが作成されています。中身はコメントがたくさんあるのですが以下のようになっているはずです。
Vagrant.configure("2") do |config| config.vm.box = "centos/7" end仮想マシンを起動
以下コマンドで仮想マシンを起動させることができます。
$ vagrant up仮想マシンにSSHで接続
仮想マシンの起動が終わると、SSHでシェル接続が可能になります。
$vagrant ssh通常、SSHでの接続にはサーバアドレスやユーザIDの指定などが必要ですが、Vagrantによって立ち上げられた仮想マシンには、vagrant sshコマンドを使って簡単にSSH接続できるようになっています。
Last login: Sun Feb 3 10:17:25 2019 from 10.0.2.2 [vagrant@localhost ~]$このような状態になっていれば、接続完了です。
サーバー構築＠仮想環境
仮想環境の構築が完了した所で、実際に仮想環境上(CentOS)にサーバーを構築していきます。
PHPファイルをブラウザに表示するには、WEBサーバーが必要な為です。ポイントは、VagrantにSSHで接続した状態で実行することです。PHPとApacheのインストール
PHPとApacheをインストールします。
Apacheは、WEBサーバーを構築するWebサーバーソフトウェアというもので、世界中で最も使われているんだとか。$ sudo yum install php $ sudo yum install httpdApacheを入れたら以下のようなディレクトリが作成されます。
/var/www//etc/httpd//var/log/httpd/無事にインストールが完了したら、以下のコマンドを入力します。
$ cd /var/www/html $ sudo vi index.htmlviエディターが開くので、とりあえずindex.htmlの中に
Hello Worldを入力します。<h1>Hello World</h1>
Escapeキーでエディタを閉じて、:wqと打ちます。
wは保存、qは終了を意味します。（もしエラーになる場合は:wq!と打つと確実に終了ができます）Vagrantfileの再設定
exitコマンドで仮想マシンから出て、Vagrantfile（※vagrant initした時作成されたファイル）のネットワークの設定を行い、ローカルから仮想マシンを見れるようにします。$ exit $ vim Vagrantfile# Create a private network, which allows host-only access to the machine # using a specific IP. config.vm.network "private_network", ip: "192.168.33.10"27行目あたりにある、
config.vm.network "private_network", ip: "192.168.33.10"のコメントを外します。（キーボードのxを押して、#を削除したら、Escapeキーでエディタを閉じて、:wqと打ちます）Vagrandを再起動
設定を変えたので、再起動します。
$ vagrant reloadApacheの起動
$ sudo service httpd start192.168.33.10にアクセスして、
Hello Worldが表示されていればOKです。Apacheの設定ファイル編集
本記事のゴールとなる、PHPを表示させるための作業です。（あと一息）
まず、Apacheの設定ファイルを編集します。$ sudo vi /etc/httpd/conf/httpd.conf以下のような記述を探します。
AddType application/x-compress .Z AddType application/x-gzip .gz .tgz上の記述の下に以下の2つを追記します。
AddType application/x-httpd-php .php AddType application/x-httpd-php-source .phpsこれで、Apacheは拡張子がPHPのファイルをPHPプログラムとして処理をしてくれます。
PHPファイルの作成
$ cd /var/www/html $ sudo vi test.phptest.php<html> <body> <?php echo('Hello PHP'); ?> </body> </html>
http://192.168.33.10/test.phpにアクセスし、Hello PHPと表示されたら成功です。
おわりに
今回は、PHPの実装内容をブラウザで確認するまでという簡単な内容でしたが、Chefを使った自動構築だったり、Vagrant上のファイルをVScodeで編集することもできるみたいなので、今後色々調べて試してみたいと思います。
- 投稿日：2019-02-03T23:15:01+09:00
Vagrant + VirtualBoxでMac OS上にPHP仮想環境を構築する
背景
PHPの開発環境はXAMPPで手っ取り早く構築できますが、今回初めて仮想環境を準備してみてたので備忘録がてらにメモしておきます。
実現したいこと
VagrantとVirtualBoxで仮想環境を構築し、PHPの実装内容をブラウザで確認してみたいと思います。
イメージとしてはこんな感じ。
環境
Mac OS Mojave Version 10.14仮想環境とは
自分のPC内（物理マシン）に、コンピュータ（仮想マシン）を作成して、そこにPHPやRuby、Mysqlといった開発に必要なソフトウェアなどをインストールして動かしたりすることができる環境のことです。
要は、自分のPC上に仮想的に作り上げた本番・テスト環境だと思って下さい。
仮想環境は、
ハイパーバイザ型、ホスト型、コンテナ型の3つに分類されます。
今回VargrantとVirtualBoxで準備するのは、ホスト型と呼ばれる仮想環境です。それぞれの特徴や違いについては、別途まとめたいと思います。とりあえずここでは割愛します。なぜ仮想環境？
結論としては、環境の差異をミニマイズすることができるからです。
例えば、チームで開発・運用を行う場合、一般的には以下のステップで進めていくと思います。
- 開発環境（Development Environment）
- 検証（テスト）環境（Testing Environment）
- ステージング環境（Staging Environment）
- 本番環境（Production Environment）
しかし、各々がこれらの環境構築を手作業で行った場合、環境に差異が生まれることがあり、開発環境では動くのに本番環境では動かないといった問題が生じる可能性があります。
仮想環境による開発では、こうした問題をミニマイズすることができます。仮想環境のメリット
仮想環境による開発のメリットはたくさんあります。要は、効率的に開発を行うことができます。
- 実働・本番環境に合わせたOSが選択できる
- Vagrantコマンド一発で環境の構築・停止・削除・再構築ができる
- ホストマシン（自分のPC）とは独立しているので、ソフトやパッケージのインストールなどを仮想環境で気軽に試せる
- chefなどの設定管理ソフトを導入すれば必要なソフトやライブラリが追加された状態の環境をすぐに作れる
- 設定を共有すれば開発者間で共通の開発環境を構築できる
Vagrantとは
一言でいうと、仮想マシンをコマンドラインで簡単に扱えるようにするツールです。
VirtualBoxとは
Vagrant自体には仮想化の機能はないため、VirtualBoxと呼ばれる仮想環境を構築するためのツール（他にもありますが）を使用します。
セットアップ
まず、VagrantとVirtualBoxを自分のPCにインストールします。インストール自体はそこまで難しくないので、サクッとやっちゃいましょう。
VirtualBoxのインストール
公式サイトからインストーラをダウンロードして実行します。
https://www.virtualbox.org/wiki/DownloadsOS X hostsを選択して、あとはダイアログに指示に従って進めて下さい。
VirtualBoxのバージョン確認
インストールできたかどうか、バージョンを確認します。
$ VBoxManage -v 6.0.4r128413バージョンが表示されていれば、インストール成功です。
VirtualBox Extension Packのインストール
Vagrantを操作するために必要なVirtualBoxの拡張パックををインストールします。
公式サイトのAll supported platformsからインストールします。
こちらもダイアログの指示に従って進めましょう。以下のような状態になっていればインストール成功です。
Vagrantのインストール
公式サイトからインストーラをダウンロードして実行します。
https://www.vagrantup.com/downloads.html
インストール先のマシンのOSとビット数に応じたインストーラが出てくるので、Mac OS X, 64-bit」を選びます。
Vagrantのバージョンの確認
インストールできたかどうか、バージョンを確認します。
$ vagrant --version Vagrant 2.2.3バージョンが表示されていれば、インストール成功です。
仮想環境構築
VagrantとVirtualBoxのセットアップが完了したら、開発環境の構築に移ります。
Vagrant Boxを検索
まず、Vagrant Cloudと呼ばれるVagrantで使えるBoxのクラウドサービスから、仮想環境のベースとなるVagrant Boxを検索します。
https://app.vagrantup.com/boxes/searchVagrant Boxは、仮想マシンのテンプレート(ひな形、ベース)となるファイルです。
例えば、CentOSのBoxをインストールすれば、簡単にCentOS環境を構築することができます。
Vagrant Boxをインストール
以下コマンドでインストール出来ます。
$ vagrant box add [Box名またはURL]実際にインストールしてみましょう。
$ vagrant box add centos/7 ==> box: Loading metadata for box 'centos/7' box: URL: https://vagrantcloud.com/centos/7 This box can work with multiple providers! The providers that it can work with are listed below. Please review the list and choose the provider you will be working with. 1) hyperv 2) libvirt 3) virtualbox 4) vmware_desktop Enter your choice:
Enter your choice：と言うメッセージが表示されるので、今回の場合だとVirtualBoxを利用しているので3)を選択します。
実行するとBoxファイルのダウンロードが始まります。OSイメージなのでサイズもそれなりに大きく、ちょっと時間がかかリます。==> box: Adding box 'centos/7' (v1812.01) for provider: virtualbox box: Downloading: https://vagrantcloud.com/centos/boxes/7/versions/1812.01/providers/virtualbox.box box: Download redirected to host: cloud.centos.org ==> box: Successfully added box 'centos/7' (v1812.01) for 'virtualbox'!Successfully〜と言うメッセージが表示されればOKです。
Vagrant Boxのインストール確認
インストールできたかどうか、以下コマンドで確認します。
$ vagrant box list centos/7 (virtualbox, 1812.01)作業ディレクトリ作成
centos7という作業ディレクトリを作成し、そこに仮想環境を作りたいと思います。要は下準備です。
$ mkdir centos7 $ cd centos7 $ pwd /Users/Username/vagrant/centos7Vagrantfileの作成
下準備ができたら、Vagrantfileを作成します。
Vagrantfileは、仮想マシンを立ち上げる際のconfigやprovision（立ち上げ時自動実行）を記述するファイル です。要は仮想環境の設計図みたいなもので、これを元にどんなPCでも同じような仮想環境を構築できます。
$ vagrant init centos/7Vagrantfileの確認
コマンドを実行すると、Vagrantfileが作成されています。中身はコメントがたくさんあるのですが以下のようになっているはずです。
Vagrant.configure("2") do |config| config.vm.box = "centos/7" end仮想マシンを起動
以下コマンドで仮想マシンを起動させることができます。
$ vagrant up仮想マシンにSSHで接続
仮想マシンの起動が終わると、SSHでシェル接続が可能になります。
$vagrant ssh通常、SSHでの接続にはサーバアドレスやユーザIDの指定などが必要ですが、Vagrantによって立ち上げられた仮想マシンには、vagrant sshコマンドを使って簡単にSSH接続できるようになっています。
Last login: Sun Feb 3 10:17:25 2019 from 10.0.2.2 [vagrant@localhost ~]$このような状態になっていれば、接続完了です。
サーバー構築＠仮想環境
仮想環境の構築が完了した所で、実際に仮想環境上(CentOS)にサーバーを構築していきます。
PHPファイルをブラウザに表示するには、WEBサーバーが必要な為です。ポイントは、VagrantにSSHで接続した状態で実行することです。PHPとApacheのインストール
PHPとApacheをインストールします。
Apacheは、WEBサーバーを構築するWebサーバーソフトウェアというもので、世界中で最も使われているんだとか。$ sudo yum install php $ sudo yum install httpdApacheを入れたら以下のようなディレクトリが作成されます。
/var/www//etc/httpd//var/log/httpd/無事にインストールが完了したら、以下のコマンドを入力します。
$ cd /var/www/html $ sudo vi index.htmlviエディターが開くので、とりあえずindex.htmlの中に
Hello Worldを入力します。<h1>Hello World</h1>
Escapeキーでエディタを閉じて、:wqと打ちます。
wは保存、qは終了を意味します。（もしエラーになる場合は:wq!と打つと確実に終了ができます）Vagrantfileの再設定
exitコマンドで仮想マシンから出て、Vagrantfile（※vagrant initした時作成されたファイル）のネットワークの設定を行い、ローカルから仮想マシンを見れるようにします。$ exit $ vim Vagrantfile# Create a private network, which allows host-only access to the machine # using a specific IP. config.vm.network "private_network", ip: "192.168.33.10"27行目あたりにある、
config.vm.network "private_network", ip: "192.168.33.10"のコメントを外します。（キーボードのxを押して、#を削除したら、Escapeキーでエディタを閉じて、:wqと打ちます）Vagrandを再起動
設定を変えたので、再起動します。
$ vagrant reloadApacheの起動
$ sudo service httpd start192.168.33.10にアクセスして、
Hello Worldが表示されていればOKです。Apacheの設定ファイル編集
本記事のゴールとなる、PHPを表示させるための作業です。（あと一息）
まず、Apacheの設定ファイルを編集します。$ sudo vi /etc/httpd/conf/httpd.conf以下のような記述を探します。
AddType application/x-compress .Z AddType application/x-gzip .gz .tgz上の記述の下に以下の2つを追記します。
AddType application/x-httpd-php .php AddType application/x-httpd-php-source .phpsこれで、Apacheは拡張子がPHPのファイルをPHPプログラムとして処理をしてくれます。
PHPファイルの作成
$ cd /var/www/html $ sudo vi test.phptest.php<html> <body> <?php echo('Hello PHP'); ?> </body> </html>
http://192.168.33.10/test.phpにアクセスし、Hello PHPと表示されたら成功です。
おわりに
今回は、PHPの実装内容をブラウザで確認するまでという簡単な内容でしたが、Chefを使った自動構築だったり、Vagrant上のファイルをVScodeで編集することもできるみたいなので、今後色々調べて試してみたいと思います。
- 投稿日：2019-02-03T22:03:05+09:00
Mac で開発中のサイト(localhost)を iPhone で表示させる
http://localhost:3000
というような今開発しているローカルサイトを手元にある iPhone ですぐに見られるようにします。
基本方針は Bluetooth を使ったインターネット共有で、ハード・ソフト面で他に何も準備しないバージョン。
https の対応はまた今度。環境
- MBP
- Wifi でインターネット接続
- iPhone
- 特別な設定なし
- 有線 LAN なし
- ケーブル類出したくない
方法
1: システム設定 -> 共有 を開きます
2: インターネット共有を設定します
右側の Bluetooth を選んで左側のインターネット共有をオン。
上の下線を引いてある(pcの名前).localをメモ。3: iPhone から Bluetooth で Mac に接続
4: iPhone のブラウザを開いてアドレス欄に
http://(pcの名前).localを入力してアクセス
http://localhost:3000で開発しているならhttp://(pcの名前).local:3000を入力。5: 見れます
備考
- Mac の Wifi が余ってるなら Bluetooth じゃなくてそっちで繋げられます
- というか同じ Wifi 繋げるなら IP 直接打てばいいみたいなところもあります
- 同じネットワークに繋げない特殊環境で役立ててください
- 投稿日：2019-02-03T20:39:36+09:00
[Mac OSX]備忘録 インストール一覧[High Sierra]
Mac 開発環境構築
色々開発用にMacに入れたもので手順が煩雑になりがちなものがあったので備忘録として残します。
インストール内容一覧
基本的にはHomebrewを利用する
よく使うコマンド
# brew $ brew list $ brew search $ brew doctor $ brew install $ brew uninstall $ brew upgrade #brew cask $ brew cask list $ brew cask search $ brew cask install $ brew cask uninstall $ brew cask upgrade $ brew cask cleanup
Xcode
Apple製の統合開発環境
# Homebrewをインストールするのに必要 $ xcode-select --install
Homebrew
MacOS用パッケージマネージャ
- アプリのインストールをターミナルからできるようにする
- UI系のインストールはbrew-cask
- フォントのインストールも可
# Homebrewをインストールする $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" # GUI系のアプリをインストールできるようにする $ brew install caskroom/cask/brew-cask # フォントのインストールをできるようにする $ brew tap caskroom/fonts # java8をインストールするために必要 $ brew tap caskroom/versions
Netbeans
phpの統合 開発環境
# Android studioのインストールにも必要 $ brew cask install java8 # とりあえずphp版をインストール $ brew cask install netbeans-php
VisualStudioCode
テキストエディタ(メイン装備)
# VS Code をインストール $ brew cask install visual-studio-code
Sequel Pro
SQLクライアント: A5:SQLがwindowsのみ対応なので代わりに使用
# Sequel Proをインストール $ brew cask install sepuel-pro
Pycharm CE
PythonのIDE 無料版
$ brew cask install pycharm-ce
SourceTree
gitクライアント: GUIでgitが使える
(インストールしてみたがgitコマンドのほうが便利だと気づいたのでほぼ使ってない)※Mac版はssh鍵の認証がwindows版と異なるので注意
# Sourcetreeをインストール $ brew cask install sourcetree #.sshディレクトリをつくる $ mkdir .ssh #.sshは隠しフォルダーになるのでfinderで見えるようにする $ defaults write com.apple.finder AppleShowAllFiles TRUE $ killall Finder # ssh鍵のパーミッションを変更 $ chmod 700 .ssh $ chmod 600 ~/id_rsa
Node.js
- Node.js : webpackとかgulpなどを使うときに必要なもの
- npm : パッケージ(追加機能)を管理するためのもの
- nodebrew : Node.jsの特定のバージョンでしか動作しない場合があるのでバージョンを指定してインストールを出来るようにするためのもの
# Homebrewでnodebrewをインストール $ brew install nodebrew $ nodebrew setup # パスを通す $ echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.bash_profile # bash_profileを変更したので再読み込み $ source ~/.bash_profile # latestをインストール $ nodebrew install-binary latest # Warning: such file or directory ←このエラーがでたら $ mkdir -p ~/.nodebrew/src $ nodebrew install-binary latest # バージョン一覧を確認 $ nodebrew list # 使いたいバージョンを有効化する $ nodebrew use v9.2.0
Gulp
- Gulp(タスクランナー) : Sassのコンパイルなどを自動化するツール
- gulp-sass : node-sassを実行するためのモジュール
- gulp-autoprefixer : cssにプレフィックスをつけるためのモジュール
- gulp-sourcemaps : .mapファイルを生成するモジュール
- gulp-plumber : gulpがエラーで終了するのを防止するモジュール
- gulp-notify : gulpのエラー内容を通知するモジュール
# プロジェクトのディレクトリを掘る $ mkdir hoge # プロジェクトのディレクトリへ移動 $ cd hoge/ # moduleをインストールして、 package.jsonを生成する $ npm init # gulpをローカルにインストール $ npm install --save-dev gulp # ローカルのgulpをaliasで使えるようにする $ echo "alias gulp='./node_modules/.bin/gulp'" >> ~/.bash_profile # エイリアスを使ってインストールされているか確認 # ※プロジェクトにインストールしたのでディレクトリに注意 $ gulp -v # gulpfile.jsを作る←これにタスクを記述していく $ touch gulpfile.js # gulpのプラグインを入れていく # 引き続きプロジェクトのディレクトリ $ npm install gulp-sass --save-dev $ npm install gulp-autoprefixer --save-dev $ npm install gulp-sourcemaps --save-dev $ npm install gulp-plumber --save-dev $ npm install gulp-notify --save-dev'use strict'; const gulp = require('gulp'); const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); const sourcemaps = require('gulp-sourcemaps'); const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); const SCSS_SRC = './src/sass/**/*.scss'; const CSS_DEST = './public/assets/css/'; const scss_options = { outputStyle: 'compressed', }; const prefix_options = { browsers: ['last 6 version', 'ie >= 9'], cascade: false, }; var notifyMsg = { errorHandler: notify.onError("ERROR: <% error.message %>") }; gulp.task('build:scss', function() { gulp.src(SCSS_SRC) .pipe(plumber(notifyMsg)) .pipe(sourcemaps.init()) .pipe(sass(scss_options)) .pipe(autoprefixer(prefix_options)) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(CSS_DEST)); }); gulp.task('scss:watch', function() { gulp.watch(SCSS_SRC, ['build:scss']); }); gulp.task('default', ['scss:watch']);# プロジェクトのディレクトリに移動 $ cd hoge/ # Gulp 開始 $ gulp # Gulp 停止 ctrl + C # コマンドではなくキー入力
VirtualBox
VMを立てる
Vagrantで使う$ brew cask install virtualbox
Vagrant
仮想環境を作る
$ brew cask install vagrant
Ansible
環境構成ツール
$ brew install ansible
Docker for Mac
コンテナ
$ brew cask install docker
FlieZilla
ファイル転送
$ brew cask install filezilla
- 投稿日：2019-02-03T20:16:27+09:00
サブライムテキストでJavascript の予測変換機能を追加してみた②
「サブライムテキストでJavascriptの予測変換機能を追加してみた①」の続き。
参考にした記事
- https://qiita.com/akakuro43/items/600e7e4695588ab2958d)
- https://qiita.com/omega999/items/6f65217b81ad3fffe7e6
- JavaScriptのためのSublime Textプラグイン①jsHintをインストール。
以下のコマンドを実行。
MyMac:~ takawaki$ npm install -g jshint-gというオプションは、「グローバルインストール」というもので、npmのインストール場所にパッケージをインストールする。
つけなかったら、ローカルインストールでカレントディレクトリのnode_modules内にインストールされるらしい。
参考記事：npmのグローバルインストールとローカルインストール②SublimeLinterをインストール
SublimeLinter-jshintを使うためにはSublimeLinter-jshintを動かすためのSublimeLinter というプラグインが必要とのこと。
sublimeTextにて、インストールパッケージを起動して、SublimeLinterをインストール。③SublimeLinter-jshintをインストール
インストールパッケージを起動して、SublimeLinterjshintをインストール。
これで、予測変換機能が使えるようになった。
- 投稿日：2019-02-03T20:16:27+09:00
サブライムテキストでJavascriptの予測変換機能を追加してみた②
「サブライムテキストでJavascriptの予測変換機能を追加してみた①」の続き。
参考にした記事
- https://qiita.com/akakuro43/items/600e7e4695588ab2958d)
- https://qiita.com/omega999/items/6f65217b81ad3fffe7e6
- JavaScriptのためのSublime Textプラグイン①jsHintをインストール。
以下のコマンドを実行。
MyMac:~ takawaki$ npm install -g jshint-gというオプションは、「グローバルインストール」というもので、npmのインストール場所にパッケージをインストールする。
つけなかったら、ローカルインストールでカレントディレクトリのnode_modules内にインストールされるらしい。
参考記事：npmのグローバルインストールとローカルインストール②SublimeLinterをインストール
SublimeLinter-jshintを使うためにはSublimeLinter-jshintを動かすためのSublimeLinter というプラグインが必要とのこと。
sublimeTextにて、インストールパッケージを起動して、SublimeLinterをインストール。③SublimeLinter-jshintをインストール
インストールパッケージを起動して、SublimeLinterjshintをインストール。
これで、予測変換機能が使えるようになった。
- 投稿日：2019-02-03T18:04:30+09:00
サブライムテキストでJavascript の予測変換機能を追加してみた①
WEBサイト制作で使っているsublimeText（サブライムテキスト）で、Javascriptの予測変換機能を追加してみた。
これで、querySelectorといった長ったらしいメソッドも楽に入力できるに違いない。
でも、どうやらそのためには、「jshint」というプラグインがあるらしいが、前提としてNode.jsをインストールしておく必要があるとのこと。
Node.jsというのは、「サーバーサイドで動くJavascript」のこと。詳細を調べると、複雑すぎて(⁰▿⁰)だったので、とりあえずは左のような浅い理解で今はOKとさせてください。
参照サイト
後々、ドットインストール等で勉強します。
以下に、Node.jsインストール・jshint追加までの手順を記します。参考にした記事
- https://qiita.com/akakuro43/items/600e7e4695588ab2958d)
- https://qiita.com/omega999/items/6f65217b81ad3fffe7e6
- JavaScriptのためのSublime Textプラグイン① homebrewのインストール
homebrewというのは、Mac用のパッケージマネージャ。→公式サイト
パッケージマネージャーというのは、OSという一つの環境で各種のソフトウェアの管理、ソフトウェア同士やライブラリとの依存関係を管理するシステム。(Wikipediaから引用)
⬇︎
Macターミナルを起動して、以下のコマンドを実行。
※homebrew公式サイトの「インストール」項目を参照/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"インストールできたか確認するために、「brew doctor」と打ち込んだら、変な表示がされた。
「brew doctor」というのは、インストールされたhomebrewの問題をチェックしてくれるコマンド。Please note that these warnings are just used to help the Homebrew maintainers with debugging if you file an issue. If everything you use Homebrew for is working fine: please don't worry or file an issue; just ignore this. Thanks! Warning: "config" scripts exist outside your system or Homebrew directories. `./configure` scripts often look for *-config scripts to determine if software packages are installed, and what additional flags to use when compiling and linking. Having additional scripts in your path can confuse software installed via Homebrew if the config script overrides a system or Homebrew provided script of the same name. We found the following "config" scripts: /anaconda3/bin/icu-config /anaconda3/bin/freetype-config /anaconda3/bin/xslt-config /anaconda3/bin/libpng16-config /anaconda3/bin/python3.7-config /anaconda3/bin/libpng-config /anaconda3/bin/xml2-config /anaconda3/bin/python3.7m-config /anaconda3/bin/python3-config /anaconda3/bin/curl-config /anaconda3/bin/ncursesw6-config /anaconda3/bin/pcre-config Warning: Broken symlinks were found. Remove them with `brew cleanup`: /usr/local/bin/mono-boehm /usr/local/bin/prj2makeWarningということは「警告」ってこと？
一つ目の警告から、調べてみた。
①. 「Warning: "config" scripts exist outside your system or Homebrew directories.」
（警告： "config"スクリプトはあなたのシステムまたは自作ディレクトリの外にあります。）
解決方法はここを参考にしたけどうまくできませんでした。そもそもbashなどといったシェルの知識を持ち合わせていないから、参考記事のコードをコピペしても何をしているのかさっぱり分かりません。
とりあえず致命的な警告ではないので、ここは飛ばします。
シェルスクリプトは、後々ドットインストール等で勉強します。
https://dotinstall.com/lessons/basic_shellscript_v2二つ目の警告は、
②. 「Warning: Broken symlinks were found. Remove them withbrew cleanup」
（壊れたシンボリックリンクが見つかりました。brew cleanupでそれらを削除してください。）
これは、メッセージ通りに、MyMac:~ takawaki$ brew cleanupを実行した後は、警告が出なくなった。
シンボリックリンク
OSのファイルシステムの機能の一つで、特定のファイルやディレクトリを指し示す別のファイルを作成し、それを通じて本体を参照できるようにする仕組み。UNIX系OSでよく用いられるもので、Windowsでも利用することができる。
ショートカットと同じじゃないの？と思ったが厳密には違うみたいです。→参考サイト②nodebrewのインストール
nodebrewとは、node.jsを自分のマシン内でversion管理するためのツール。
プロジェクトごとにnode.jsのversionが違っていたりすると、不具合が起こるのでそれを解決してくれる。参考記事
以下のコマンドを実行して、確認のためバージョン確認。
brew install nodebrew nodebrew -v⬇︎
実行結果nodebrew 1.0.1 Usage: nodebrew help Show this message nodebrew install <version> Download and install <version> (from binary) nodebrew compile <version> Download and install <version> (from source) nodebrew install-binary <version> Alias of `install` (For backword compatibility) nodebrew uninstall <version> Uninstall <version> nodebrew use <version> Use <version> nodebrew list List installed versions nodebrew ls Alias for `list` nodebrew ls-remote List remote versions nodebrew ls-all List remote and installed versions nodebrew alias <key> <value> Set alias nodebrew unalias <key> Remove alias nodebrew clean <version> | all Remove source file nodebrew selfupdate Update nodebrew nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version nodebrew exec <version> -- <command> Execute <command> using specified <version> Example: # install nodebrew install v8.9.4 # use a specific version number nodebrew use v8.9.4③Node.jsのインストール
以下のコマンドを実行
nodebrew innstall-binary latest
そしたら
以下のエラーが返ってきたMyMac:~ takawaki$ nodebrew install-binary latest Fetching: https://nodejs.org/dist/v11.9.0/node-v11.9.0-darwin-x64.tar.gz Warning: Failed to create the file Warning: /Users/takafumi/.nodebrew/src/v11.9.0/node-v11.9.0-darwin-x64.tar.gz: Warning: No such file or directory 0.0% curl: (23) Failed writing body (0 != 846) download failed: https://nodejs.org/dist/v11.9.0/node-v11.9.0-darwin-x64.tar.gz解決策を調べた。
Node.jsのインストールに失敗する時の解決策（No such file or directory）
No such file or directoryは、「こんなファイルを知りません」というメッセージ。
だから以下のコマンドで非表示ディレクトリを作成mkdir -p ~/.nodebrew/srcmkidirはディレクトリを作成するコマンド
-pはparentオプションで、エラーを表示せず記述したディレクトリが存在しなければ作成することができる。
ディレクトリ名の最初に、「.」をつけるのは非表示ディレクトリにするため。
作成したら、nodebrew innstall-binary latestを再実行。MyMac:~ takawaki$ nodebrew install-binary latest Fetching: https://nodejs.org/dist/v11.9.0/node-v11.9.0-darwin-x64.tar.gz ######################################################################### 100.0% Installed successfullyインストールが成功した!念のため確認。
「nodebrew list」は、インストールされているバージョンを確認できる。
以下のコマンドでは、version11.9.0を使っていることが分かる。
```
MyMac:~ takawaki$ nodebrew list
v11.9.0current: v11.9.0
```④実行パスを通す
以下のコマンドでnodeコマンドへパスをbashrcへ保存。
$ echo 'export PATH=$PATH:/Users/takafumi/.nodebrew/current/bin' >> ~/.bashrcだが、インストール確認したら次のメッセージが出た
node -v -bash: node: command not foundなので、参考記事通りに「.bash_profile」に以下を記述
参考記事①そして、再度確認したら、node.jsが使えるようになった!
MyMac:~ takawaki$ node -v v11.9.0⑤npmを使える確認
npmは、Node.jsのパッケージ管理システム。
MyMac:~ takawaki$ npm -v 6.5.0インストールされていることを確認。
今回、なんどもパスを通すためにファイルをいじったけど、そもそもパスを通すということはどういうことなのかも調べた。
→参考記事：PATHを通す方法
- 投稿日：2019-02-03T18:01:10+09:00
music21を使う環境構築
はじめに
http://miso-soup3.hateblo.jp/entry/2018/12/20/223705
こちらの記事から環境構築を行った時の備忘録です。
インストール
$ python3 -m venv env $ . env/bin/activate $ pip install jupyter $ pip install music21 $ pip install pyknon $ brew cask install lilypond $ brew cask install musescorejupyter 入れた後は 再読み込みが必要でした。
設定
MuseScoreのバージョンが2から3にあがっていたので、初期設定のままではうごきませんでした。
environment.pyのMuseScoreの設定はここ
http://web.mit.edu/music21/doc/usersGuide/usersGuide_24_environment.html
より
下記を実行すると~/.music21に設定が保存されます。from music21 import environment us = environment.UserSettings() us.create() us['musescoreDirectPNGPath'] = '/Applications/MuseScore 3.app/Contents/MacOS/mscore' us['musicxmlPath'] = '/Applications/MuseScore 3.app/Contents/MacOS/mscore'~/.music21を消した場合は再起動するまでメモリ上で設定を保持しているような挙動でした。
VS Codeでの動作確認用
#%% from music21 import environment us = environment.UserSettings() us.getSettingsPath() #%% from music21 import environment us = environment.UserSettings() us.create() us['musescoreDirectPNGPath'] = '/Applications/MuseScore 3.app/Contents/MacOS/mscore' us['musicxmlPath'] = '/Applications/MuseScore 3.app/Contents/MacOS/mscore' #%% from music21 import note,stream stream1 = stream.Stream() note = note.Note("C4", quarterLength = 1) stream1.repeatAppend(note, 4) stream1.show()参考
http://web.mit.edu/music21/doc/installing/installAdditional.html
さいごに
VSCode1つで開発できてしまって
環境構築はコマンドライン完了できるのは素敵です。
- 投稿日：2019-02-03T13:26:13+09:00
【Xamarin.Forms】Prismソリューションを作成する（2019年2月版）
はじめに
2019年2月時点のVisual Studio 2017 Community for MACでXamarin.Forms ＋ Prism のソリューションを作成する方法です。
環境
- macOS 10.14 Mojave
- Visual Studio Community 2017 for MAC(7.7.4)
ソリューションの作成手順
「Prism Template Studio and Developer Toolkit」のインストール
拡張機能マネージャーを開き「ギャラリー」を選択。
右上の検索キーワードに「prism」と入力すると「ギャラリー」タブに「Prism Template Studio and Developer Toolkit」が表示されるので、選択して「インストール...」ボタンをクリックします。
ソリューションの作成
Visual Studioのファイルメニューから「新しいソリューション」をクリックして、「Blank Prism Application」を選択して「次へ」をクリックします。
「Blank Prism Application」で次の通り入力して「次へ」をクリック。
- Project Name：任意のプロジェクト名。
- Container:「Autofac」を選択。
「新しいBlank Prism Applicationの構成」はお好みで。
ソリューションができました。
srcフォルダの下に3つプロジェクトがあります。
プロジェクト名 概要 {プロジェクト名} PCL（Portable Class Library） {プロジェクト名}.Droid Android用プロジェクト。Androidで実行したい場合はこのプロジェクトをスタートアッププロジェクトとして選択します。 {プロジェクト名}.iOS iOS用プロジェクト。iOSで実行したい場合はこのプロジェクトをスタートアッププロジェクトとして選択します。 ビルド
Androidプロジェクトのビルド
「{プロジェクト名}.Droid」プロジェクトを右クリックし、「{プロジェクト名}.Droidのビルド」をクリックします。
「styles.xml」でビルドエラーが出たら、こちらを参考にして改善してください。
https://qiita.com/ats_y/items/8f64cc924f81ce2ba777iOSプロジェクトのビルド
Androidプロジェクトのビルド同様、「{プロジェクト名}.iOS」プロジェクトを右クリックし、「{プロジェクト名}.iOSのビルド」をクリックします。
いくつか警告がでますが、とりあえずビルドが通りました。
- 投稿日：2019-02-03T12:06:58+09:00
npmでのinstallコマンドに失敗する
mac環境にてnpmを使用してyarnをインストールしようとした時に発生
エラー内容を確認すると
installコマンドを使用した際にディレクトリに対する権限がない為に発生しているエラーであった為npmのディレクトリを確認し、権限を付与する下記のコマンドを実行
npmのディレクトリの確認
emueshioMacBook:~ mac$ npm config get prefix /usr/localディレクトリに対する権限の付与
emueshioMacBook:~ mac$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}パスワードを要求される
Password:確認の為、yarnをインストール
emueshioMacBook:~ mac$ npm install --global yarn /usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js /usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js + yarn@1.12.3 added 1 package in 1.676s emueshioMacBook:~ mac$インストールが完了し、正常に動作した事を確認。