shuhelohelo’s blog

Xamarin.Forms多めです.

Elixir/Phoenix環境をWindows10に構築する（2）

Elixir Phoenix

Elixirのインストールはこちら。

shuhelohelo.hatenablog.com

やること

今回はPhoenixをインストールします。 インストールの手順はこちらが詳しいようです。

PhoenixはElixirで書かれた、MVCパターンのWebアプリケーションを開発するためのフレームワークです。Ruby on RailsやASP.NET MVCなどと同じようなものですね。

このフレームワークを使うことで、Webアプリケーションの雛形がスパッと生成され、フレームワークに乗ることで効率的に開発ができると思われます（まだよくわかってない）。

Mix

さて、そんなPhoenixのインストールですが、これに限らず開発に必要な様々なパッケージの導入などにはMixという機能（コマンド）を使う必要があるようです。

今のところのなんとなくのイメージなのですが、dotnetコマンドみたいなものなのかなと思っています。 プロジェクトの作成にdotnet new、パッケージの追加にdotnet add、プロジェクトの実行にdotnet runしたりしますが、Mixはこれらと同じことをするときに使います。 MixはElixirのインストール時に一緒にインストールされているはずです。 コマンドラインで確認してみましょう。

$>mix -v
Erlang/OTP 21 [erts-10.1] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1]

Mix 1.8.1 (compiled with Erlang/OTP 20)

Hexのインストール

Hexというのはパッケージマネージャで、Phoenixアプリケーションを可動させるための各種パッケージをインストールするために必要です。

コマンドプロンプトで以下のように入力してHexをインストールします。 mixコマンドの出番です。

$>mix local.hex

Phoenixのインストール

コマンドプロンプトで以下のように入力します。

$> mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

これでPhoenixのインストールは完了...しません。 残念ながら。

Node.jsのインストール

Node.jsのインストールはオプションとのことですが、オプションならば入れておくことにします。 Node.jsのダウンロードサイトからインストーラをダウンロードします。 nodejs.org

インストーラを実行します。 f:id:shuhelohelo:20190418203111p:plain

次の画面でAgreementに同意します。 インストール先は既定値で。 f:id:shuhelohelo:20190418203319p:plain

インストールの構成もそのまま。 f:id:shuhelohelo:20190418203334p:plain

インストールが完了したら、確認してみます。

$>node -v
v10.15.3

バージョンが表示されたらOKです。

PostgreSQLのインストール

WebアプリケーションでDBは欠かせないですね。 公式サイトから現時点での最新版（11.2）をダウンロードします。 PostgreSQL Database Download | EnterpriseDB

ダウンロードが完了したらインストーラを実行します。

f:id:shuhelohelo:20190418204622p:plain
ウェルカム！

インストール先は既定値で。 f:id:shuhelohelo:20190418204654p:plain

インストールするコンポーネントも規定値で。 f:id:shuhelohelo:20190418204741p:plain

データ（おそらくDBのテーブルとか）の保存先も規定値で。 f:id:shuhelohelo:20190418204901p:plain

このDBのデフォルトの管理者（Super User）としてpostgresという名前のユーザーが用意されるのですが、そのユーザーのパスワードを決めます。 ローカル環境の構築なのでpostgresとしておきました。 f:id:shuhelohelo:20190418205211p:plain

ポート番号は既定値で。 f:id:shuhelohelo:20190418205310p:plain

ロケールは「Japanese, Japan」にしました。 f:id:shuhelohelo:20190418205544p:plain

最後に表示されるインストール情報はこんな感じです。 f:id:shuhelohelo:20190418205743p:plain

Installation Directory: C:\Program Files\PostgreSQL\11
Server Installation Directory: C:\Program Files\PostgreSQL\11
Data Directory: C:\Program Files\PostgreSQL\11\data
Database Port: 5432
Database Superuser: postgres
Operating System Account: NT AUTHORITY\NetworkService
Database Service: postgresql-x64-11
Command Line Tools Installation Directory: C:\Program Files\PostgreSQL\11
pgAdmin4 Installation Directory: C:\Program Files\PostgreSQL\11\pgAdmin 4
Stack Builder Installation Directory: C:\Program Files\PostgreSQL\11

これでインストールの準備が完了です。 インストールを開始しましょう。

インストールが完了すると、以下のように表示されます。 ここのチェックを外してインストールを終了します。 f:id:shuhelohelo:20190418210310p:plain

パスを通す

Postgresの各種コマンドを実行できるようにパスを通します。 上記の「インストール準備完了時に表示される情報」をもとに、Postgresのインストール先にあるbinフォルダを環境変数のPathに加えます。 全て規定値でインストールしていれば以下のフォルダだと思います。 C:\Program Files\PostgreSQL\11\bin

確認

それでは確認してみましょう。 一度コマンドプロンプトを閉じて、再度コマンドプロンプトを起動してください。 そして、以下のコマンドを入力します。

$>psql --version
psql (PostgreSQL) 11.2

インストール成功です。

再びPhoenixのインストールへ

これでPhoenixのプロジェクト作成と実行に必要なものが揃いました。 それではプロジェクトを作成しましょう。

プロジェクト作成

プロジェクト作成には次のコマンドを入力します。 お約束のハローワールドです。

$>mix phoenix.new hello_world

プロジェクトの生成が開始し、hello_worldフォルダが作成され、その中にプロジェクトを構成するファイルやフォルダが配置されます。

インストール中に以下のように依存関係をインストールするか訊かれるので、もちろんyとしておきます。 これで、必要なパッケージが取得、インストールされ、すぐに実行可能な状態になります。

Fetch and install dependencies? [Yn] y
* running mix deps.get
* running npm install && node node_modules/brunch/bin/brunch build

プロジェクトの生成が完了したら、早速実行...といきたいところですが、ちょっと待ちましょう。

プロジェクト生成処理のメッセージの一番最後を見てみましょう。 こんなメッセージがあります。

We are all set! Run your Phoenix application:

    $ cd hello_world　<=　プロジェクトフォルダに移動して
    $ mix phoenix.server　<=　Webサーバーを起動しなよ

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phoenix.server　<=　IEx（対話型の実行環境）からでも実行できるよ。

Before moving on, configure your database in config/dev.exs and run:

    $ mix ecto.create　<=　実行する前に設定ファイル(./config/dev.exs)を変更して、これをやってね。DB作るから

これをやらなくてもWebサーバーは起動できてウェルカムページも表示されます。

f:id:shuhelohelo:20190418221330p:plain
ウェルカム！

しかし、DBが作られていないためコンソールには延々とエラーメッセージが流れることになります。

ですので、Webサーバーを起動する前にこのプロジェクトのためにDBを作成します。 プロジェクトフォルダ直下で、以下のコマンドを入力します。

mix ecto.create

これで準備完了です。 念の為、このプロジェクト用のDBが作られているかを確認しましょう。 -UオプションはPostgresSQLのユーザーを指定するオプションです。 今回のインストール作業ではデフォルトのpostgresユーザーのみが存在しているはずなので、それを指定します。 -lオプションは現時点で存在するDBのリストを表示させるオプションです。 パスワードを求められるので、インストール作業中に指定したパスワードを入力します。 今回、私はpostgresと設定しました。 以下のようにDBのリストが表示され、その中にプロジェクトの名前が見つかればOKです。 今回はhello_worldというプロジェクトでmix ecto.createしたので、hello_world_devというDBがリストに含まれています。

$>psql -U postgres -l
ユーザ postgres のパスワード:
                                                データベース一覧
      名前       |  所有者  | エンコーディング |      照合順序      | Ctype(変換演算子)  |     アクセス権限
-----------------+----------+------------------+--------------------+--------------------+-----------------------
 hello_world_dev | postgres | UTF8             | Japanese_Japan.932 | Japanese_Japan.932 |
 postgres        | postgres | UTF8             | Japanese_Japan.932 | Japanese_Japan.932 |
 template0       | postgres | UTF8             | Japanese_Japan.932 | Japanese_Japan.932 | =c/postgres          +
                 |          |                  |                    |                    | postgres=CTc/postgres
 template1       | postgres | UTF8             | Japanese_Japan.932 | Japanese_Japan.932 | =c/postgres          +
                 |          |                  |                    |                    | postgres=CTc/postgres
(4 行)

Webサーバーの起動

プロジェクトフォルダ直下で、以下のコマンドを入力してWebサーバーを起動します。

$> mix phoenix.server

...略...

Generated ecto app
==> phoenix_ecto
Compiling 6 files (.ex)
Generated phoenix_ecto app
==> hello_world
Compiling 12 files (.ex)
Generated hello_world app
[info] Running HelloWorld.Endpoint with Cowboy using http://localhost:4000
22:23:11 - [32minfo[39m: compiled 6 files into 2 files, copied 3 in 1.0 sec

それではブラウザでlocalhost:4000にアクセスしてください。 以下の画面が表示され、かつ、コンソールにエラーメッセージが流れていなければ成功です。

f:id:shuhelohelo:20190419112209p:plain
ウェルカム！

コンソールにエラーメッセージが流れる場合

もしかしたら、mix phoenix.serverを実行したときにコンソールに以下のようなエラーが流れるかもしれません。

C:\Users\nishizawa\Desktop\hello_world>mix phoenix.server
warning: found quoted keyword "test" but the quotes are not required. Note that keywords are always atoms, even when quoted. Similar to atoms, keywords made exclusively of Unicode letters, numbers, underscore, and @ do not require quotes
  mix.exs:52

Compiling 12 files (.ex)
Generated hello_world app
[info] Running HelloWorld.Endpoint with Cowboy using http://localhost:4000
[error] Postgrex.Protocol (#PID<0.352.0>) failed to connect: ** (Postgrex.Error) FATAL 28P01 (invalid_password): ・ｽ・ｽ ・ｽ[・ｽU"postgres"・ｽﾌパ・ｽX・ｽ・ｽ・ｽ[・ｽh・ｽF・ｽﾘに趣ｿｽ・ｽs・ｽ・ｽ・ｽﾜゑｿｽ・ｽ・ｽ
[error] Postgrex.Protocol (#PID<0.350.0>) failed to connect: ** (Postgrex.Error) FATAL 28P01 (invalid_password): ・ｽ・ｽ ・ｽ[・ｽU"postgres"・ｽﾌパ・ｽX・ｽ・ｽ・ｽ[・ｽh・ｽF・ｽﾘに趣ｿｽ・ｽs・ｽ・ｽ・ｽﾜゑｿｽ・ｽ・ｽ
...

文字化けは無視していただいて、英語の部分だけ見るとinvalid_passwordがあります。 このエラーは「WebサーバーがDBに接続しようとしたけど、パスワードが違うから接続できなかった」という内容のようです。

対処

mix phoenix.newでプロジェクトを作成したときのメッセージを思い出してみましょう。 config/dev.exsを設定してね、というメッセージがあったと思います。

このconfig/dev.exsファイルの中にDBへの接続に関する設定も書かれています。 エディタで開いて、一番下に以下のようなDBに関する記述が見つかります。

# Configure your database
config :hello_world, HelloWorld.Repo,
  adapter: Ecto.Adapters.Postgres,
  username: "postgres",
  password: "postgres",
  database: "hello_world_dev",
  hostname: "localhost",
  pool_size: 10

このusernameとpasswordにPostgreSQLのユーザー名とパスワードが正しく記述されているかを確認してください。

デフォルトで上記の内容になっているので、もしインストール作業の中でpostgresユーザーのパスワードをpostgres以外に設定していた場合、このファイル内のpasswordの項目を変更してください。 例えば、postgresユーザーのパスワードにhelloと指定していたとしたら、以下の用に書き換える必要があります。

# Configure your database
config :hello_world, HelloWorld.Repo,
  adapter: Ecto.Adapters.Postgres,
  username: "postgres",
  password: "hello",
  database: "hello_world_dev",
  hostname: "localhost",
  pool_size: 10

以上でPhoenixのインストールまで完了です。