20200515のMacに関する記事は6件です。

投稿日：2020-05-15T22:08:45+09:00

MacでのLaravel6の環境構築の手順

目的

学習の記録のため。

環境構築で少し苦戦したため。

環境構築の手順

PHPのパッケージ管理プログラム「Composer」のインストール

Laravelをインストールする（ここで少し苦戦した）

プロジェクトを作成する

PHPのパッケージ管理プログラム「Composer」のインストール

Laraveではプログラミングをダウンロードしてインストールするのではなく
PHPのパッケージ管理プログラム「Composer」というものを利用する。

以下のリンクからcomposerのファイルを直接ダウンロードして配置する。
https://getcomposer.org/download/

Latest Snapshot　をクリックすると
「ダウンロード」フォルダに「composer.phar」というファイルがダウンロードされる。

次にターミナルを起動。
ダウンロードフォルダに移動し/user/local/binに配置する。
$ cd ~/Downloads
$ sudo mv composer.phar /usr/local/bin/composer
パスワードを求められるので入力する。
composer.pharが/usr/local/bin/内にcomposerという名前で移動するコマンド。
これでいつでもcomposerが呼び出し可能になる。

最後にcomposerのパーミション（アクセス権）を設定する。
$ chmod a+x /usr/local/bin/composer
これで、composerが実行できるようになり、composerの準備は完了。
$ composer -V
Composer version 2.0-dev
上記のようになっていれば正常にインストールできている。

Laravelをインストールする

ターミナルを起動し以下を実行する。
$ composer global require laravel/installer
うまくいけばこれでLaravelがインストールされる。
下記エラーが出た場合はこちらの記事を参考にしてください。

環境変数PATHの設定

環境変数PATHにインストールの場所を追記しないとLaravelのコマンドが使えない。
そこで、以下のコマンドを実行。
$ echo "export PATH=~/.composer/vendor/bin:$PATH" >> ~/.bash_profile
$ source ~/.bash_profile
すると、Laravelがコマンドとして認識されるようになる。

プロジェクトを作成する

アプリを作成するディレクトリに移動し以下のコマンドを実行する。
$ laravel new プロジェクト名
その後、以下のように作成したプロジェクトに移動しサーバーを起動するコマンドを実行。
$ cd プロジェクト名/
$ php artisan serve
Laravel development server started: http://127.0.0.1:8000
ここまで完了して、
http://localhost:8000/
にアクセスすると以下のようにLaravelのトップページが表示される。

Ctrlキー + 「C」を押すとサーバーを停止できる。
以上で環境構築は完了です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-15T11:43:19+09:00

Visual Studio Codeでdotnet 3.x系のプロジェクトを開くとエラーCS0246やCS0518が出る問題の暫定対処

はじめに

プロジェクトのTargetFrameworkにnetcoreapp3.0やnetcoreapp3.1を指定した場合に、Visual Studio Codeでプロジェクトを読み込むとCS0246やCS0518が発生する問題への暫定対処方法です。

Visual Studio Codeのプラグイン入れ直したり、Homebrewでdotnet再インストールしてみたところ上手くいかず。
.csproj設定ファイルを書き換えることによってエラーの表示は無くなりました。

別のスマートな解決方法がありそうな気がするので知っている人がいたら教えて欲しい。

プロジェクト作成
$ mkdir test
$ cd test
$ dotnet new console
$ code .
対応方法

.csprojファイルのとの「Microsoft.NETCore.App」を追加する。
<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.NETCore.App" Version="*"/>
  </ItemGroup>
</Project>
書き換えた後にVisual Studio Codeを閉じて、下記のコマンドを実行するとエラーが消えます。
$ dotnet restore
$ dotnet clean
$ code .
暫定対処だと思う点

Microsoft.NETCore.Appは「パッケージ、メタパッケージ、フレームワーク - .NET Core | Microsoft Docs」を見ると。
メタパッケージと呼ばれるもので.NET Core 配布に含まれるライブラリをまとめたもの。
メタパッケージが暗黙的に参照されるのでビルド自身では不要。
Visual Studio CodeのC#プラグインのパッケージ参照周りの問題？何か設定すれば解決できそう？（探してみたがわからず）

そのため、ビルド時に2.2.8から3.1.0に置き換えたとエラーが出る。
netcoreapp3.1用Microsoft.NETCore.Appを読み込む必要があると思うので動作的には正そう。
[fail]: OmniSharp.MSBuild.ProjectLoader NETSDK1061: プロジェクトは Microsoft.NETCore.App バージョン 2.2.8 を使用して復元されましたが、
現在の設定では、バージョン 3.1.0 が代わりに使用されます。この問題を解決するには、復元およびこれ以降の操作 (ビルドや発行など) で同じ設定を使用していることをご確認ください。
通常この問題は、ビルドや発行の実行時に RuntimeIdentifier プロパティを設定したが、復元時には設定していない場合に発生することがあります。
詳しくは、https://aka.ms/dotnet-runtime-patch-selection を参照してください。
[warn]: OmniSharp.MSBuild.ProjectManager Failed to load project file'/Users/xxxxx/develpoment//test/test.csproj'./Users/xxxxx/develpoment//test/test.csproj
/Users/xxxxx/develpoment//test/test.csproj(0,0): 
Error: NETSDK1061: プロジェクトは Microsoft.NETCore.App バージョン 2.2.8 を使用して復元されましたが、現在の設定では、バージョン 3.1.0 が代わりに使用されます。
この問題を解決するには、復元およびこれ以降の操作 (ビルドや発行など) で同じ設定を使用していることをご確認ください。
通常この問題は、ビルドや発行の実行時に RuntimeIdentifier プロパティを設定したが、復元時には設定していない場合に発生することがあります。
詳しくは、https://aka.ms/dotnet-runtime-patch-selection を参照してください。
環境

システム

MacBook Pro 2018
mac OS 10.14.6

Visual Studio Code

本体
$ code --version
1.45.1
5763d909d5f12fe19f215cbfdd29a91c0fa9208a
x64
プラグイン
C# ms-dotnettools.csharp 1.21.18

dotnet
$ dotnet --info
.NET Core SDK (global.json を反映):
 Version:   3.1.103
 Commit:    6f74c4a1dd

ランタイム環境:
 OS Name:     Mac OS X
 OS Version:  10.14
 OS Platform: Darwin
 RID:         osx.10.14-x64
 Base Path:   /usr/local/share/dotnet/sdk/3.1.103/

Host (useful for support):
  Version: 3.1.3
  Commit:  4a9f85e9f8

.NET Core SDKs installed:
  3.1.103 [/usr/local/share/dotnet/sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.App 3.1.3 [/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 3.1.1 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.3 [/usr/local/share/dotnet/shared/Microsoft.NETCore.App]

To install additional .NET Core runtimes or SDKs:
mono
$ mono --version
Mono JIT compiler version 6.8.0.105 (tarball Tue Feb  4 20:28:59 GMT 2020)
Copyright (C) 2002-2014 Novell, Inc, Xamarin Inc and Contributors. www.mono-project.com
    TLS:           
    SIGSEGV:       altstack
    Notification:  kqueue
    Architecture:  amd64
    Disabled:      none
    Misc:          softdebug 
    Interpreter:   yes
    LLVM:          supported, not enabled.
    Suspend:       hybrid
    GC:            sgen (concurrent by default)
エラー詳細

Visual Studio Codeで問題タブで、項目を選んで右クリック→コピーで取得した情報。
{
    "resource": "/Users/xxxxx/develpoment/test/obj/Debug/netcoreapp3.1/test.AssemblyInfo.cs",
    "owner": "csharp",
    "code": "CS0246",
    "severity": 8,
    "message": "The type or namespace name 'System' could not be found (are you missing a using directive or an assembly reference?) [test]",
    "source": "csharp",
    "startLineNumber": 14,
    "startColumn": 12,
    "endLineNumber": 14,
    "endColumn": 18
}

{
    "resource": "/Users/xxxxx/develpoment/test/obj/Debug/netcoreapp3.1/test.AssemblyInfo.cs",
    "owner": "csharp",
    "code": "CS0518",
    "severity": 8,
    "message": "Predefined type 'System.String' is not defined or imported [test]",
    "source": "csharp",
    "startLineNumber": 14,
    "startColumn": 55,
    "endLineNumber": 14,
    "endColumn": 61
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-15T11:35:47+09:00

MAC環境でVirtualBox+Vagrant+DockerでReact開発環境を作る╰(°ㅂ°)╯

#stayhomeの時間を活用して、「仮想環境」とか「コンテナ開発」とかに慣れ親しもうという魂胆です。作業を進める上でよくわからなかった点など、周辺情報を個人的な備忘録として残します。

ゴール

作ったり壊せたり自由にできる開発環境を立ち上げられるようになること。React.jsの勉強を始める予定なので、React.jsの雛形アプリをブラウザで表示させるところまでをゴールとする。

作業の流れ

ステップが多く、私のような初学者は、わからない部分を調べている間に迷子になることもしばしば。一つ一つの動作確認をしながら作業を進めていきます。

【前半戦：ホストOS側での作業】

事前準備

vagrantプラグインの導入確認

VMの設定

vagrant初期化

Vagrantfileの編集

dockerとdocker-composeの導入

Dockerfileの作成

docker-compose.ymlの作成

ホストOSとゲストOS間のファイル同期の設定

mutagen.yml作成

【後半戦：ゲストOS側での作業】

VM起動

vagrantでVM起動

VMにssh接続

VMの動作確認

ホストOSとのフォルダ共有を確認

dockerとdocker-compose動作

React.jsの導入

Dockerコンテナの起動

起動中のコンテナに入る

create-react-appのインストールとアプリのひな形作成

アプリの実行

教材

基本となる教科書はこちらの二冊(記事)です。
- Vagrantを使う「Mac最速のDocker環境」を初心者向けに解説【遅いMac for Dockerを卒業】
- DXを大幅に低下させるDocker for Macを捨ててMac最速のDocker環境を手に入れる

その他、以下のQiita記事を参考にさせていただきました。
- Docker環境内でcreate-react-app
- Windows環境においてVirtualBox+Vagrant+DockerでReact開発環境を作る＊Windows向けに書かれた記事ですが、仮想環境起動のパート以降の後半部分を中心に参考にしました。

作業ディレクトリ

作業を行うディレクトリは、ホームフォルダ下に置いてある開発(develop)ファイルにVM（仮想マシン）フォルダを作成。その配下にsample-pjなる場所を作りました。
/Users/home/develop/vm/sample-pj

実行環境・ソフトウェア・パッケージ・プラグイン

macOS Mojave version 10.14.6

VirtualBox Version 6.1.6

Vagrant 2.2.9

VirtualBox Image ubuntu/xenial64

Vagrant Plugin

vagrant-disksize

vagrant-hostsupdater

vagrant-mutagen

vagrant-docker-compose

Docker version 19.03.8

docker-compose version 1.24.0

前提

Vagrantを使う「Mac最速のDocker環境」を初心者向けに解説【遅いMac for Dockerを卒業】に習って、以下のステップまで進めた状態からスタートします。

VirtualBoxをインストール

Vagrantをインストール

Vagrant Boxをダウンロード

プラグインの導入
~/develop/vm/sample-pj
$ vagrant box list
ubuntu/xenial64 (virtualbox, 20200505.0.0)

$ vagrant plugin list
vagrant-disksize (0.1.3, global)
vagrant-docker-compose (1.5.1, global)
vagrant-hostsupdater (1.1.1.160, global)
vagrant-mutagen (0.1.2, global)
この↑状態が確認できたところから開始です(｀ω´)

【前半戦：ホストOS側での作業】

VMの設定

vagrant初期化
~/develop/vm/sample-pj
$ vagrant init ubuntu/xenial64

# 上記コマンドを実行して、下のような結果が出てくれば完了。
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.
何が起きたかチェーーーーーック( ·∀·)ﾉ
~/develop/vm/sample-pj
$ ls

# sample-pj（プロジェクトディレクトリ）内の構造を見てみると、
# Vagrantfileができていることが確認できます。
Vagrantfile
Vagrantfileの編集

Vagrantfileは、仮想機械を構築するための構成情報を記述するための設定ファイルです。

( ˘ω˘ )? 「Vagrantfileにどんなことが書かれているのか？」という疑問については、Vagrantにおける仮想マシンの設定に素敵な感じにまとまっているので、詳しくはそちらを参照ください。
~/develop/vm/sample-pj
# vimエディタでVagrantfileを開きます。
$ vim Vagrantfile

# -*- mode: ruby -*-
# vi: set ft=ruby :
# All Vagrant configuration is done below. The "2" in Vagrant.configure
（略）
Vimエディタの使い方については、Vim初心者に捧ぐ実践的入門などのQiita記事を参考にしてください。初見では、とっつきにくい見た目をしていますが、何度か触っているうちに慣れてきました。

早速、教科書＝（Vagrantを使う「Mac最速のDocker環境」を初心者向けに解説【遅いMac for Dockerを卒業】）のVagrantのセットアップを参照して、Vagrantfileを編集します。
~/develop/vm/sample-pj(ﾎｽﾄOS内ﾌﾟﾛｼﾞｪｸﾄﾃﾞｨﾚｸﾄﾘ)
# /sample-pj/Vagrantfile
Vagrant.configure('2') do |config|

  # VMを立ち上げる際のboxの指定
  config.vm.box = 'ubuntu/xenial64'

  # VMに設定するホスト名
  # 後述のmutagen.yml内の記述と揃える必要があるので覚えて置くこと。
  config.vm.hostname = 'sample-app'

  config.vm.network :private_network, ip: '192.168.50.10'
  # ポートへフォワードの設定
  config.vm.network "forwarded_port", guest: 3000, host: 3000

  config.vm.provider :virtualbox do |vb|
    vb.gui = false
    vb.cpus = 4
    vb.memory = 4096
    vb.customize ['modifyvm', :id, '--natdnsproxy1', 'off']
    vb.customize ['modifyvm', :id, '--natdnshostresolver1', 'off']
  end

  config.disksize.size = '30GB'
  config.mutagen.orchestrate = true

　# config.vm.synced_folderは、ホストOSとゲストOS間で共有するフォルダを指定します。
  config.vm.synced_folder './', '/home/vagrant/app', type: "rsync",
    rsync_auto: true,
    rsync__exclude: ['.git/', 'node_modules/', 'log/', 'tmp/']

  # config.vm.provisionは、初回（VM作成時）に実行されます。
  # ここではDockerとdocker-composeの導入について書かれています。
  config.vm.provision :docker, run: 'always'

  # docker-compose の設定
  config.vm.provision :docker_compose,
    yml: "/vagrant/docker-compose.yml",
    compose_version: "1.24.0",
    run: "always"
end
ここで詰まった！！ERR_CONNECTION_REFUSEDエラー(´ε｀；)

ポートへフォワードの設定とdocker-composeのインストールについては、私が追記編集した部分です。

ポートフォワードの設定については、Vagrant + VirtualBoxで仮想環境側のポートをあけるを参考にしました。この記述なし（教科書通り）で作業を進め、ブラウザでhttp://localhost:3000/ でアプリを開いてみようとすると、ERR_CONNECTION_REFUSEDという下記のエラーが出てきて困ってしまいましたが、ポートフォワードの設定を加えて解決できました。

ブラウザ(http://localhost:3000/)

This site can’t be reached
localhost refused to connect.

Try:
Checking the connection
Checking the proxy and the firewall

ERR_CONNECTION_REFUSED

ここで詰まった！！docker_composeがvagrant upでインストールされない(´ε｀；)

docker-compose の設定ですが、教科書通りにconfig.vm.provision :docker_composeだけでは、vagrant up時にインストールされませんでした。バージョン情報などを追加し、無事インストールできるようになりました。原因は全くわかりません・・・。

dockerとdocker-composeの導入

Vagrantfileでは、config.vm.provisionの部分で、初回のvagrant up（VM作成時）にdockerとdocker-composeがインストールされるように設定しました。

以下では、docker-compose upによるコンテナ実行時に呼び出される、docker-compose.ymlとDockerfileの２つを作成していきます。

docker-compose.ymlの作成
~/develop/vm/sample-pj(ﾎｽﾄOS内ﾌﾟﾛｼﾞｪｸﾄﾃﾞｨﾚｸﾄﾘ)
# docker-compose.ymlを作成
vagrant@sample-app:~/app$ vi docker-compose.yml

# 下記のように書き換え
version: "3"
services:
  #コンテナ名。後ほど、この名前を指定してコマンドを叩くことになります。
  node:　
    build:
      # 参照するファイルのある場所を、docker-compose.ymlからの相対パスで指定。
　　　 # 今回は同じ階層・同じフォルダ内にあるので、下記のような表記になる。
      context: .
　　　 # 参照するファイル。今回はDockerfile_nodeという名前です。
      dockerfile: Dockerfile_node　
    # ストレージの指定　ホストOS:ゲストOS
    volumes:
      - ./:/usr/src/app
    ports:
      - "3000:3000"
    # docker-compose up後、即コンテナが終了することなく、待機状態とする。
    tty: true
Dockerfileの作成
~/develop/vm/sample-pj(ﾎｽﾄOS内ﾌﾟﾛｼﾞｪｸﾄﾃﾞｨﾚｸﾄﾘ)
# Dockerfileを作る。
# docker-compose.ymlで指定した通り、今回はDockerfile_nodeという名前にします。
$ vi Dockerfile_node

# Dockerfileを編集

# どのイメージを基にするか。今回はreactの開発環境なので、node.jsを使用します。
# 現時点で最新・コンパクトなバージョンを指定しました。
FROM node:14.2-alpine

# 作業ディレクトリ
WORKDIR /usr/src/app
作業ディレクトリ（WORKDIR）については、色々なサイトを見ましたが、Linux系では/usr/src/appがお作法になっているようです。「/usr/src/appとは？」という疑問に関しては、　Linux豆知識 217「/usr/src」ディレクトリを参照。

ホストOSとゲストOS間のファイル同期の設定

Vagrantfileの config.vm.synced_folderの記述で、ホストOSとゲストOS間で共有するフォルダを指定しましたが、config.vm.synced_folderによるファイル共有は、vagrant upによるVM作成時のみ実行されます。つまり、常時シンクロしてくれるわけではないそうです。

DXを大幅に低下させるDocker for Macを捨ててMac最速のDocker環境を手に入れる - ファイル同期の手段に習って、ホストOSとゲストOS間のファイル同期は、後述のmutagenというプラグインを使います。

mutagen.yml作成

DXを大幅に低下させるDocker for Macを捨ててMac最速のDocker環境を手に入れる - ファイル同期のソリューション「Mutagen」参考に、mutagen.ymlを作成、編集していきましょう。
~/develop/vm/sample-pj(ﾎｽﾄOS内ﾌﾟﾛｼﾞｪｸﾄﾃﾞｨﾚｸﾄﾘ)
# touchコマンドでmutagen.yml新規作成
$ touch mutagen.yml 

# sample-pj（プロジェクトディレクトリ）内の構造を見てみると、mutagen.ymlが追加されているのが確認できます。
$ ls
# 実行結果↓
Vagrantfile mutagen.yml
~/develop/vm/sample-pj(ﾎｽﾄOS内ﾌﾟﾛｼﾞｪｸﾄﾃﾞｨﾚｸﾄﾘ)
# multagen.ymlファイルを開く
$ vim mutagen.yml

# multagen.yml内を編集
sync:
  app:
    # 双方向同期モード 但し、alphaが優先、ベースになる
    mode: "two-way-resolved"
    # alphaとbetaでエンドポイントを指定
    alpha: "./"
    # sample-appというhostの中の、/home/vagrant/appディレクトリ
    # sample-appは、Vagrantfile内のconfig.vm.hostname = 'sample-app'で指定した名前と揃える必要があります
    beta: "sample-app:/home/vagrant/app"
    # ignore（＝無視）なので、以下に掲げる内容を無視するということかな？
    ignore:
　　　 # vcs....バージョン管理システム（Version Control System)のことかな？それがtrueとは...? よく、わかりませんでした・・・。
      vcs: true
      # 一連のパスで指示されているディレクトリは無視するということかな？この辺よくわかりませんでした・・・。
      paths:
        - "/node_modules"
        - "/log"
        - "/tmp"
( ˘ω˘ )? 「multagen.ymlが何をしてくれているのか？」という疑問については、以下を参考にしまして、掴め（たような気に）ました。

Mutagenでファイル同期が簡単に出来た話

Mutagen公式ドキュメントFile synchronization

以上で、ファイル共有の設定が完了しました。

以下の４つのファイルが準備できた段階で、ホストOS側での作業は終了です。
~/develop/vm/sample-pj
$ ls
# 実行結果↓
Dockerfile_node     docker-compose.yml
Vagrantfile     mutagen.yml
【後半戦：ゲストOS側での作業】

ここからは、VMを起動させてゲストOS側でReactの開発環境を作っていきます。

VagrantでVM起動

早速、VMの起動へ。
~/develop/vm/sample-pj(ﾎｽﾄOS内ﾌﾟﾛｼﾞｪｸﾄﾃﾞｨﾚｸﾄﾘ)
$ vagrant up
ディレクトリ内をチェーーーーーック( ·∀·)ﾉ
~/develop/vm/sample-pj(ﾎｽﾄOS内ﾌﾟﾛｼﾞｪｸﾄﾃﾞｨﾚｸﾄﾘ)
$ ls

# 実行結果↓
Dockerfile_node
Vagrantfile
docker-compose.yml
mutagen.yml
mutagen.yml.lock
ubuntu-xenial-16.04-cloudimg-console.log
作った覚えのない、ubuntu-xenial-16.04-cloudimg-console.logというファイルが新しくできていることがわかります。
( ˘ω˘ )? cloudimg-console.logって、何してくれるの？という疑問については、cloudimg-console.logとはを参考にしました。名前の前半のubuntu-xenial-16.04の部分は、仮想OSの種類に依るようです。

VMにssh接続
~/develop/vm/sample-pj(ﾎｽﾄOS内ﾌﾟﾛｼﾞｪｸﾄﾃﾞｨﾚｸﾄﾘ)
$ vagrant ssh

# 実行結果↓
Welcome to Ubuntu 16.04.6 LTS (GNU/Linux 4.4.0-178-generic x86_64)
（略）
# Vagrantfileで指定したホスト名でターミナルが開く。
vagrant@sample-app:~$ 
vagrant@sample-app:~$ というように、ターミナルが表示されればOK。vagrantユーザーでsample-appというホスト（＝ゲストOS）にログインされています。

VMの中身をチェーーーーーック( ·∀·)ﾉ
vagrant@sample-app
# /（ルートディレクトリ）配下にLinuxのディレクトリが並んでいます。
vagrant@sample-app:~$ cd /
vagrant@sample-app:/$ ls
# 実行結果↓
bin   home            lib64       opt   sbin  tmp      vmlinuz
boot  initrd.img      lost+found  proc  snap  usr      vmlinuz.old
dev   initrd.img.old  media       root  srv   vagrant
etc   lib             mnt         run   sys   var
仮想環境にゲストOSが導入されていることが確認できました。ちなみに、Linuxのディレクトリの構造についての参考URLはこちらLinuxのディレクトリ構造（一覧）を理解するを参照ください。

ホストOSとのフォルダ共有状況ををチェーーーーーック( ·∀·)ﾉ
vagrant@sample-app
# ~（ホームディレクトリ）
vagrant@sample-app:~$ cd 
vagrant@sample-app:~$ ls
# 実行結果↓
app


# appへ移動し、カレントディレクトリのパスを出力する
vagrant@sample-app:~/app$ pwd
# 実行結果↓ 
/home/vagrant/app　#multagen.ymlファイルで指定したゲストOS側のエンドポイントと一致していることがわかります。


# appの中も見てみましょう。
vagrant@sample-app:~$ cd app
vagrant@sample-app:~/app$ ls
# 実行結果↓
Dockerfile_node     mutagen.yml
Vagrantfile         mutagen.yml.lock
docker-compose.yml  ubuntu-xenial-16.04-cloudimg-console.log
試しに、/app内でtestという名前でディレクトリを作成してみます。
vagrant@sample-app
# /app内でtestという名前でディレクトリを作成
vagrant@sample-app:~/app$ mkdir test
vagrant@sample-app:~/app$ ls

# 実行結果↓
Dockerfile_node
Vagrantfile
docker-compose.yml
mutagen.yml
mutagen.yml.lock
test  # 新しく作ったディレクトリ
ubuntu-xenial-16.04-cloudimg-console.log
一度、VMを離れて、ホストOS内の作業ディレクトリを見てみると、testという名前のファイルができているのが確認できました。
vagrant@sample-app
# exitでVMからログアウト
vagrant@sample-app:/vagrant$ exit

# 実行結果↓
logout
Connection to 127.0.0.1 closed.
~/develop/vm/sample-pj(ﾎｽﾄOS内ﾌﾟﾛｼﾞｪｸﾄﾃﾞｨﾚｸﾄﾘ)
$ ls

# 実行結果↓
Dockerfile_node
Vagrantfile
docker-compose.yml
mutagen.yml
mutagen.yml.lock
test # こちらにもtestディレクトリができています
ubuntu-xenial-16.04-cloudimg-console.log

# ファイルの共有が確認できたのでtestフォルダを削除します
$ rm -r test

# もう一度VMへssh接続
$ vagrant ssh

# 実行結果↓
Welcome to Ubuntu 16.04.6 LTS (GNU/Linux 4.4.0-178-generic x86_64)
(略)
VM側でのtestディレクトリが消えているか確認します。
vagrant@sample-app
vagrant@sample-app:~$ cd app
vagrant@sample-app:~/app$ ls

# 実行結果↓　こちらでもtestファイルが無くなっていました。
Dockerfile_node     mutagen.yml
Vagrantfile         mutagen.yml.lock
docker-compose.yml  ubuntu-xenial-16.04-cloudimg-console.log
以上で、ホストOSとのフォルダ共有が確認できました。

dockerとdocker-compose動作も併せて、チェーーーーーック( ·∀·)ﾉ
vagrant@sample-app
# dockerの動作チェック
vagrant@sample-app:~$ docker --version
# 実行結果↓
Docker version 19.03.8, build afacb8b7f0

# docker-composeの動作チェック
vagrant@sample-app:~$ docker-compose --version
# 実行結果↓
docker-compose version 1.24.0, build 0aa59064
バージョン情報が表示されて、dockerとdocker-composeが導入されていることが確認できました。

Dockerコンテナの起動
vagrant@sample-app
# /appディレクトリにてコマンド実行。バックグラウンドでの実行するため-dオプションをつけます。
vagrant@sample-app:~/app$ docker-compose up -d

# コンテナの実行状況を確認しましょう
vagrant@sample-app:~/app$ docker-compose ps
# 実行結果↓
   Name             Command          State           Ports        
------------------------------------------------------------------
app_node_1   docker-entrypoint.sh    Up      0.0.0.0:3000->3000/tc
実行中のコンテナに入る
vagrant@sample-app
# 実行中のコンテナに入る。node部分は、docker-compose.ymlで指定したコンテナ名。
vagrant@sample-app:~/app$ $ docker-compose exec node sh
# 実行結果↓　以下が表示されれば無事にコンテナ内に入れています。
/usr/src/app # 
コンテナ内でcreate-react-appのインストールとアプリのひな形作成
vagrant@sample-app
# creat-react-appのインストール
/usr/src/app # npm install -g create-react-app

# react-sampleという名前でアプリのひな形を作成
/usr/src/app # create-react-app react-sample

/usr/src/app # ls
# 実行結果↓
Dockerfile
Vagrantfile
docker-compose.yml
mutagen.yml
mutagen.yml.lock
react-sample　# 新しいreactアプリが立ち上がっています
ubuntu-xenial-16.04-cloudimg-console.log
アプリの実行
vagrant@sample-app
# react-sampleディレクトリに移動
/usr/src/app # cd react-sample

# react-sampleを実行
/usr/src/app/react-sample # yarn start
# 実行結果↓
Compiled successfully!

You can now view react-sample in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.18.0.2:3000

Note that the development build is not optimized.
To create a production build, use yarn build.
ゴォォォォォル(´∀｀*)

ブラウザでhttp://localhost:3000 へアクセスしてみます。以下のような画面が出てくればOKです。

おまけ：再度コンテナに入る

一度コンテナを立ち上げた後、作業のためにコンテナに入るまでの手順はこちら。
# ホストOSの作業ディレクトリにて、VMを起動
ﾎｽﾄOS作業ﾃﾞｨﾚｸﾄﾘ $ vagrant ssh

# ゲストOSのreact-sampleアプリへ移動し、コンテナを実行
ｹﾞｽﾄOS:~$ cd app
ｹﾞｽﾄOS:~/app$ cd react-sample
ｹﾞｽﾄOS:~/app/react-sample$ docker-compose up -d

# コンテナに入る
ｹﾞｽﾄOS:~/app/react-sample$ docker-compose exec node sh

# コンテナ内
/usr/src/app #
ついでに、ソフトウェアの導入を確認。React.jsの開発ができる環境になっているようです。
/usr/src/app # node --version
v14.2.0
/usr/src/app # npm --version
6.14.4
/usr/src/app # yarn --version
1.22.4
以上！！

初・初・初学者です(´·ω·`)

暗中模索な感じで始めてしまい、うまくいかず途中で投げ出したくもなりましたが、なんとか動くところまで持ってこれました。多々、理解違いがあるかと思います。今後、間違いに気づいた点などは、適宜修正していこうと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-15T05:22:03+09:00

X11を用いたLinux用バイナリファイルをDocker for Macを用いてMac上で楽に動かせるようにする

はじめに

発端は友人から大学院の授業で使う環境の構築で困ったから手伝ってくれって言われた事でした。
見てみると、ubuntu上で教授が用意したバイナリファイルを実行できるようにできれば良さそうでした。
Windowsは環境構築の方法が解説されて、Macは自力で頑張ってと言われたそうです?
Dockerを使えば実現できそうなのでやってみました。

リポジトリ

https://github.com/taka011002/docker-ubuntu-x11

今回使用したバイナリファイルは2次配布が禁止であった為リポジトリには含めていません。各自、実行したいバイナリファイルを用意してください。

環境

macOS Catalina: 10.15.4
Docker: 19.03.8
docker-compose 1.25.5
XQuartz 2.7.11 (xorg-server 1.18.4)

X11クライアントを各自変えてあげればmacOS以外でも動作すると思います。

ゴール

下記のコマンドで簡単に実行できる様にする。
$ make up
$ make #{実行したいバイナリファイル名}
手順

0. XQuartzを導入する

macにXQuartzを未導入の場合は導入してください。
XQuartzを用いる事でMacでX11アプリケーションを動作させる事ができる様になります。
brewを導入済みの場合は下記コマンドでXQuartzを導入できると思います。
$ brew cask install xquartz
導入後は再起動かユーザーのログアウトを行わないとXQuartzの設定の反映が行われないので注意してください。

1. XQuartzのネットワーク・クライアントからの接続を許可する

XQuartzを起動できる様にできたら、XQuartzを起動し、環境設定から「ネットワーク・クライアントからの接続を許可」にチェックを入れ、XQuartzを再起動してください。

2. Dockerfileを記述する

バイナリファイルを実行する環境のDockerfileを記述しています。
実行したいバイナリファイルによって各自変更してください。
x11関連のライブラリをapt-get installする際にタイムゾーンの設定等出てきてしまってビルドが進まなくなってしまった為、タイムゾーンを設定し、ENV DEBIAN_FRONTEND noninteractiveにて他の選択項目が出てきてしまっても進む様にしています。
今回はcommandsディレクトリにバイナリファイル(複数可)を配置する事を想定しています。
Dockerfile
FROM ubuntu:20.04

WORKDIR usr/workdir

# TZを設定する
ENV TZ Asia/Tokyo
RUN apt-get update \
    && apt-get install -y tzdata \
    && rm -rf /var/lib/apt/lists/* \
    && echo "${TZ}" > /etc/timezone \
    && rm /etc/localtime \
    && ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime \
    && dpkg-reconfigure -f noninteractive tzdata

# 必要なライブラリのインストール
ENV DEBIAN_FRONTEND noninteractive
RUN apt-get update \
    && apt-get install build-essential x11-apps x11-utils x11-xserver-utils dbus-x11 -y \
    && apt-get install gedit -y \
    && apt-get install libgfortran4 -y

COPY commands/ ./commands
RUN chmod +x ./commands
ENV PATH /usr/workdir/commands:$PATH
この時点で実行できるといえばできるはずです。
参考:Docker for Mac で X11 アプリケーションを動かす

毎回長いコマンド打つのはめんどくさい、、、という気持ちの方は次の手順へ進んで下さい。

3. docker-coomposeを記述する

コンテナ側にホスト側のX11クライアントの情報を渡してあげる必要があり、コマンドを毎回打つのが面倒な為記述しました。
また、ホスト側srcディレクトリをコンテナ側/usr/workdir/srcディレクトリにマウントする様に記述しています。
docker-compose.yml
version: '3.7'
services:
  app:
    build: .
    volumes:
      - ./src:/usr/workdir/src
    env_file:
      - .env
    tty: true
    stdin_open: true
docker-compose.ymlから参照している.envは下記です。
この環境変数DISPLAYをもとにコンテナ内からXQuartzへアクセスしにいきます。
.env
DISPLAY=host.docker.internal:0
こちらの記事を参考に記述致しました。
host.docker.internalの実態としてはHost(Mac)側のhostnameを取得してくるそうです。
ここら辺の名前解決はDockerのバージョンによって推奨が違う為確認してください。

4. Makefileを記述する

毎回docker-composeコマンドを記述するのが面倒な為、Makefileを定義してあげてmakeコマンドで実行できる様にしました。
基本的にはdocker-composeをmakeで実行できるようにしています。
ポイントとしては、upで実行する際に自動的にXquartzを起動し、xhost +$(hostname)にてホスト(Mac)のhostnameでXquartzへアクセスできる様にしてコンテナ側との整合性を合わせています。
また、xhostでのアクセスはセキュリティリスクもある為気になる方は他の方法で認証してください。
Makefile
build:
    docker-compose build --no-cache

up:
    open -a Xquartz
    xhost +$(hostname)
    docker-compose up -d

down:
    docker-compose down

restart:
    make down
    make up

destroy:
    docker-compose down --rmi all --volumes

destroy-volumes:
    docker-compose down --volumes

ps:
    docker-compose ps

bash:
    docker-compose exec app bash

xeyes:
    docker-compose exec app bash -c 'xeyes'

#{実行したいバイナリファイル名}:
    docker-compose exec app bash -c '#{実行したいバイナリファイル名}'
4. 実行する

下記コマンドでdockerイメージをビルドします
$ make build
buildに成功すれば下記コマンドでdockerコンテナを起動できるはずです。
$ make up
起動できたら、コンテナ側からホスト(Mac)のXQuartzへアクセスできるかxeyesを用いてテストしてみます
$ make xeyes
このような目玉が表示されればコンテナ側からホスト(Mac)のXQuartzへアクセスできています。

後は実行したいバイナリファイルを各自配置し
$ make #{実行したいバイナリファイル名}
上記コマンドを下記の様に実行してください
$ make binary
また、下記コマンドを用いてコンテナへ入ることもできます。
$ make bash
まとめ

Dockerを用いればX11を用いたLinux用バイナリファイルもMac上のプログラムを動かすかの様に簡単に動作させる事ができた！

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-15T01:27:23+09:00

MacでのLaravel6の環境構築

目的

学習の記録のため。

環境構築で少し苦戦したため。

環境構築の手順

PHPのパッケージ管理プログラム「Composer」のインストール

Laravelをインストールする

アプリケーションを作成する

1. PHPのパッケージ管理プログラム「Composer」のインストール

Laraveではプログラミングをダウンロードしてインストールするのではなく
PHPのパッケージ管理プログラム「Composer」というものを利用する。

以下のリンクからcomposerのファイルを直接ダウンロードして配置する。
https://getcomposer.org/download/

Latest Snapshot　をクリックすると
「ダウンロード」フォルダに「composer.phar」というファイルがダウンロードされる。

　 Tweet
Qiitaで続きを読む

投稿日：2020-05-15T01:27:23+09:00

MacでLaravel6の環境構築で苦戦したのでまとめます。

ああ

　 Tweet
Qiitaで続きを読む

20200515のMacに関する記事は6件です。

MacでのLaravel6の環境構築の手順

目的

環境構築の手順

PHPのパッケージ管理プログラム「Composer」のインストール

Laravelをインストールする

環境変数PATHの設定

プロジェクトを作成する

Visual Studio Codeでdotnet 3.x系のプロジェクトを開くとエラーCS0246やCS0518が出る問題の暫定対処

はじめに

プロジェクト作成

対応方法

暫定対処だと思う点

環境

システム

Visual Studio Code

dotnet

mono

エラー詳細

MAC環境でVirtualBox+Vagrant+DockerでReact開発環境を作る╰(°ㅂ°)╯

ゴール

作業の流れ

教材

作業ディレクトリ

実行環境・ソフトウェア・パッケージ・プラグイン

前提

【前半戦：ホストOS側での作業】

VMの設定

vagrant初期化

何が起きたかチェーーーーーック( ·∀·)ﾉ

Vagrantfileの編集

dockerとdocker-composeの導入

docker-compose.ymlの作成

Dockerfileの作成

ホストOSとゲストOS間のファイル同期の設定

mutagen.yml作成

以下の４つのファイルが準備できた段階で、ホストOS側での作業は終了です。

【後半戦：ゲストOS側での作業】

VagrantでVM起動

ディレクトリ内をチェーーーーーック( ·∀·)ﾉ

VMにssh接続

VMの中身をチェーーーーーック( ·∀·)ﾉ

ホストOSとのフォルダ共有状況ををチェーーーーーック( ·∀·)ﾉ

dockerとdocker-compose動作も併せて、チェーーーーーック( ·∀·)ﾉ

Dockerコンテナの起動

実行中のコンテナに入る

コンテナ内でcreate-react-appのインストールとアプリのひな形作成

アプリの実行

ゴォォォォォル(´∀｀*)

おまけ：再度コンテナに入る

初・初・初学者です(´·ω·`)

X11を用いたLinux用バイナリファイルをDocker for Macを用いてMac上で楽に動かせるようにする

はじめに

リポジトリ

環境

ゴール

手順

0. XQuartzを導入する

1. XQuartzのネットワーク・クライアントからの接続を許可する

2. Dockerfileを記述する

3. docker-coomposeを記述する

4. Makefileを記述する

4. 実行する

まとめ

MacでのLaravel6の環境構築

目的

環境構築の手順

1. PHPのパッケージ管理プログラム「Composer」のインストール

MacでLaravel6の環境構築で苦戦したのでまとめます。

日付別

タグ一覧