PhoenixFramework를 움직여 보자!

지금 화제인 PhoenixFramework를 일단 움직이는 레벨까지 해보겠습니다.

Hex 설치

Hex는 패키지 관리 시스템입니다.

$ mix local.hex

PhoenixFramework 설치

2015/08/28 현재 최신 PhoenixFramework를 설치합니다. (v0.17.1)

$ mix archive.install https://github.com/phoenixframework/phoenix/releases/download/v0.17.1/phoenix_new-0.17.1.ez

이것입니다만 설치에 자주 이하의 커멘드를 소개하고 있습니다만 우리 쪽에서는 움직이지 않았습니다. . .

$ mix archive install phoenix
$ mix -h
mix                   # Run the default task (current: mix run)
mix app.start         # Start all registered apps
mix archive           # List all archives
mix archive.build     # Archive this project into a .ez file
mix archive.install   # Install an archive locally
mix archive.uninstall # Uninstall archives
mix clean             # Delete generated application files
mix cmd               # Executes the given command
mix compile           # Compile source files
mix deps              # List dependencies and their status
mix deps.clean        # Remove the given dependencies' files
mix deps.compile      # Compile dependencies
mix deps.get          # Get all out of date dependencies
mix deps.unlock       # Unlock the given dependencies
mix deps.update       # Update the given dependencies
mix do                # Executes the tasks separated by comma
mix escript.build     # Builds an escript for the project
mix help              # Print help information for tasks
mix hex               # Print hex help information
mix hex.config        # Read or update hex config
mix hex.docs          # Publish docs for package
mix hex.info          # Print hex information
mix hex.key           # Hex API key tasks
mix hex.outdated      # Shows outdated hex deps for the current project
mix hex.owner         # Hex package ownership tasks
mix hex.publish       # Publish a new package version
mix hex.search        # Search for package names
mix hex.user          # Hex user tasks
mix loadconfig        # Loads and persists the given configuration
mix local             # List local tasks
mix local.hex         # Install hex locally
mix local.rebar       # Install rebar locally
mix new               # Create a new Elixir project
mix phoenix.new       # Create a new Phoenix v0.17.1 application
mix run               # Run the given file or expression
mix test              # Run a project's tests
iex -S mix            # Start IEx and run the default task

mix phoenix.new 가 표시되면 설치 성공입니다.

PhoenixFramework 프로젝트 만들기

PhoenixFramework를 사용하여 프로젝트를 만듭니다.
프로젝트 이름은 문자로 시작하고 문자, 숫자, _ (밑줄) 이외에는 사용할 수 없으므로주의하십시오.

$ mix phoenix.new testphoenix
* creating test_phoenix/config/config.exs
* creating test_phoenix/config/dev.exs
* creating test_phoenix/config/prod.exs
* creating test_phoenix/config/prod.secret.exs
* creating test_phoenix/config/test.exs
* creating test_phoenix/lib/test_phoenix.ex
* creating test_phoenix/lib/test_phoenix/endpoint.ex
* creating test_phoenix/test/controllers/page_controller_test.exs
* creating test_phoenix/test/views/error_view_test.exs
* creating test_phoenix/test/views/page_view_test.exs
* creating test_phoenix/test/views/layout_view_test.exs
* creating test_phoenix/test/support/conn_case.ex
* creating test_phoenix/test/support/channel_case.ex
* creating test_phoenix/test/test_helper.exs
* creating test_phoenix/web/channels/user_socket.ex
* creating test_phoenix/web/controllers/page_controller.ex
* creating test_phoenix/web/templates/layout/app.html.eex
* creating test_phoenix/web/templates/page/index.html.eex
* creating test_phoenix/web/views/error_view.ex
* creating test_phoenix/web/views/layout_view.ex
* creating test_phoenix/web/views/page_view.ex
* creating test_phoenix/web/router.ex
* creating test_phoenix/web/web.ex
* creating test_phoenix/mix.exs
* creating test_phoenix/README.md
* creating test_phoenix/lib/test_phoenix/repo.ex
* creating test_phoenix/test/support/model_case.ex
* creating test_phoenix/priv/repo/seeds.exs
* creating test_phoenix/.gitignore
* creating test_phoenix/brunch-config.js
* creating test_phoenix/package.json
* creating test_phoenix/web/static/css/app.css
* creating test_phoenix/web/static/js/app.js
* creating test_phoenix/web/static/js/socket.js
* creating test_phoenix/web/static/assets/robots.txt
* creating test_phoenix/web/static/assets/images/phoenix.png
* creating test_phoenix/web/static/assets/favicon.ico

# 依存関係を解決しつつフェッチするか
Fetch and install dependencies? [Yn] Y

* running npm install && node node_modules/brunch/bin/brunch build
* running mix deps.get

We are all set! Run your Phoenix application:

    $ cd test_phoenix
    $ mix ecto.create
    $ mix phoenix.server

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

    $ iex -S mix phoenix.server

이제 프로젝트가 만들어졌습니다!

프로젝트를 움직여보세요

이제 작성한 프로젝트를 빠르게 이동해 봅니다.

$ cd test_phoenix
$ mix ecto.create
Could not find rebar, which is needed to build dependency :fs
I can install a local copy which is just used by mix
Shall I install rebar? [Yn] Y

/*** 諸々インストール ***/

$ mix phoenix.server
[info] Running TestPhoenix.Endpoint with Cowboy on http://localhost:4000

※ mix ecto.create 때때로 이하의 에러가 나온 경우는 PostgreSQL 설치

** (RuntimeError) could not find executable `psql` in path, please guarantee it is available before running ecto commands

다음 오류가 발생하면 PostgreSQL에서 postgres 사용자 만들기

** (Mix) The database for repo HelloPhoenix.Repo couldn't be created, reason given: psql: FATAL:  role "postgres" does not exist

그럼 http://localhost:4000 에 액세스 해 봅시다.


무사하게 표시되면 OK입니다.

조금 가자.

그럼 조금 내용을 놀아 보자.
프로젝트 구성에 대해서는 다음 기사에서 설명합니다.
Phoenix Framework Guide를 어쩐지 번역해본 ③ Adding Pages

시작하려면 Welcome to Phoenix!를 일본어로 만드십시오.

test_phoenix/web/templates/page/index.html.eex

<div class="jumbotron">
  <!-- <h2>Welcome to Phoenix!</h2> 以下に変更-->
  <h2>ようこそPhoenixへ!</h2>
  <p class="lead">A productive web framework that<br />does not compromise speed and maintainability.</p>
</div>

<div class="row marketing">
  <div class="col-lg-6">
    <h4>Resources</h4>
    <ul>
      <li>
        <a href="http://phoenixframework.org/docs/overview">Guides</a>
      </li>
      <li>
        <a href="http://hexdocs.pm/phoenix">Docs</a>
      </li>
      <li>
        <a href="https://github.com/phoenixframework/phoenix">Source</a>
      </li>
    </ul>
  </div>

  <div class="col-lg-6">
    <h4>Help</h4>
    <ul>
      <li>
        <a href="http://groups.google.com/group/phoenix-talk">Mailing list</a>
      </li>
      <li>
        <a href="http://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on freenode IRC</a>
      </li>
      <li>
        <a href="https://twitter.com/elixirphoenix">@elixirphoenix</a>
      </li>
    </ul>
  </div>
</div>

이렇게하면 다시 http://localhost:4000에 액세스하면,


문언이 바뀌 었습니다!

일단 이번은 여기까지.