DaisyUI데코타Phoenix아프리를Fly.io니데프로이시라고 楽しむ(2022年)

TailwindDaisyUI が最近流行っていると聞き試してはみたものの、 Fly.io へのデプロイに手こずってしまい辛い思いをしました.今後は楽しくできるよう成功パターンをメモします.

Phoenix アプリを DaisyUI でデコる 1 方法や Fly.io については日本語で丁寧に解説してくれている資料もありますので、ここでは細かいことを気にせず Fly.io への데프로이자체를 楽しみたいと思います.

もし何か間違っている点があったり、もっとクールなやり方をご存知でしたらぜひ코멘트欄にお便りお願いいたします.

https://qiita.com/the_haigo/items/bb839bfc20b8864dd7ac

https://zenn.dev/koga1020/articles/b60725143bbadf6a2b5a

https://zenn.dev/koga1020/books/phoenix-guide-ja-1-6/viewer/fly

動作環境




elixir          1.13.4-otp-24
erlang          24.3.4



❯ mix phx.new --version
Phoenix installer v1.6.8



❯ fly version
fly v0.0.325 darwin/amd64 Commit: da2b638 BuildDate: 2022-04-28T04:00:48Z


Fly.ioへ의 사인앱



初めての方はまずFly.ioへのsainapp必要입니다.

https://zenn.dev/koga1020/books/phoenix-guide-ja-1-6/viewer/fly#fly.io%E3%81%B8%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97

https://hexdocs.pm/phoenix/fly.html#installing-the-fly-io-cli

산풀아프리를 git clone



サンプルアプリ mnishiguchi/hello_phx_daisyui_flyio を作りましたのでそれを Fly.io へ楽しくデプロイします.

cd path/to/your/workspace

git clone https://github.com/mnishiguchi/hello_phx_daisyui_flyio

cd hello_phx_daisyui_flyio


サンプルアプリ から デプロイ関係のファイルを削除


  • fly launch コマンドの実行中に Dockerfile が検知されると必要なファイルが自動生成されないので、予めデプロイ関係のファイルを削除しておきます.
  • また過去のデプロイ時に用 した整合性の取れないファイルが残っているとエラーの原因になる可能性があります.
  • 次項で fly launch コマンドを打つと再生成されます.

  • rm -rf rel fly.toml Dockerfile
    


    플라이 런치 코만도를 타다


  • ? 앱 이름
  • 任意のアプリ名を入力してEnter、もしくは何もせずEnter

  • ? 지역 선택
  • 任意の地域を指定してEnter、もしくは何もせずEnter

  • ? 지금 PostgreSQL 데이터베이스를 설정하시겠습니까?
  • Yes

  • ? 구성 선택:
  • Development

  • ? 지금 배포하시겠습니까?
  • 데프로이노전에 Dockerfile を修正したいので No


  • ❯ fly launch
    Creating app in /Users/mnishiguchi/src/hello_phx_flyio
    Scanning source code
    Detected a Phoenix app
    ? App Name (leave blank to use an auto-generated name): mnishiguchi-test-1
    Automatically selected personal organization: Masatoshi Nishiguchi
    ? Select region: iad (Ashburn, Virginia (US))
    Created app mnishiguchi-test-1 in organization personal
    Set secrets on mnishiguchi-test-1: SECRET_KEY_BASE
    Preparing system for Elixir builds
    Installing application dependencies
    Running Docker release generator
    Wrote config file fly.toml
    ? Would you like to setup a Postgresql database now? Yes
    For pricing information visit: https://fly.io/docs/about/pricing/#postgresql-clusters
    ? Select configuration: Development - Single node, 1x shared CPU, 256MB RAM, 1GB disk
    Creating postgres cluster mnishiguchi-test-1-db in organization personal
    Postgres cluster mnishiguchi-test-1-db created
      Username:    postgres
      Password:    1659337b1f06452fdb592b84db7d015bf41bcfa76d9a46de
      Hostname:    mnishiguchi-test-1-db.internal
      Proxy Port:  5432
      PG Port: 5433
    Save your credentials in a secure place, you won't be able to see them again!
    
    Monitoring Deployment
    
    1 desired, 1 placed, 1 healthy, 0 unhealthy [health checks: 3 total, 3 passing]
    --> v0 deployed successfully
    
    Connect to postgres
    Any app within the personal organization can connect to postgres using the above credentials and the hostname "mnishiguchi-test-1-db.internal."
    For example: postgres://postgres:1659337b1f06452fdb592b84db7d015bf41bcfa76d9a46de@mnishiguchi-test-1-db.internal:5432
    
    See the postgres docs for more information on next steps, managing postgres, connecting from outside fly:  https://fly.io/docs/reference/postgres/
    
    Postgres cluster mnishiguchi-test-1-db is now attached to mnishiguchi-test-1
    The following secret was added to mnishiguchi-test-1:
      DATABASE_URL=postgres://mnishiguchi_test_1:[email protected]:5432/mnishiguchi_test_1
    Postgres cluster mnishiguchi-test-1-db is now attached to mnishiguchi-test-1
    ? Would you like to deploy now? No
    
    Your Phoenix app should be ready for deployment!.
    
    If you need something else, post on our community forum at https://community.fly.io.
    
    When you're ready to deploy, use 'fly deploy --remote-only'.
    


    本番のアプリの場合はちゃんと出力をコピーしておいたほうがよさそうです.練習だけなら多分無視して大丈夫.

    Save your credentials in a secure place, you won't be able to see them again!



    데프로이슈루앞에Dockerfile에 Node.js を追加



  • npm 코만도를 사우타메에 Node.js が必要となるようです.

  • tailwind Hexパッケージ を使用したら npm コマンドが不要になると思われますが、 DaisyUI 等の Tailwindプラグイン を使用するためには Tailwind をNPMでインストールする必要があると理解しています 🤔

  • Note: The stand-alone Tailwind client bundles first-class tailwind packages within the precompiled executable. For third-party Tailwind plugin support, the node package must be used. See the tailwind nodejs installation instructions if you require third-party plugin support.



      # install build dependencies
      RUN apt-get update -y && apt-get install -y build-essential git \
    +     && apt-get install -y curl \
    +     && curl -sL https://deb.nodesource.com/setup_16.x | bash \
    +     && apt-get install -y nodejs \
          && apt-get clean && rm -f /var/lib/apt/lists/*_*
    
      # prepare build dir
        @@ -46,12 +49,19 @@ RUN mkdir config
      COPY config/config.exs config/${MIX_ENV}.exs config/
      RUN mix deps.compile
    
    + # install npm dependencies
    + COPY assets/package.json assets/package-lock.json ./assets/
    + RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error
    +
      COPY priv priv
    
      COPY lib lib
    
      COPY assets assets
    
    + # install NPM dependencies
    + RUN npm install --prefix assets
    +
      # compile assets
      RUN mix assets.deploy
    


    데프로이



    以下のコマンドを打つだけです.

    fly deploy --remote-only
    


    便利な 플라이 코만드


  • fly を打つと全 コマンドが表示されます.
  • flyflyctl へ의 신보릭크리크등 해입니다. 2
  • とりあえず以下の코만도を楽しみましょう.



  • fly dashboard
    fly open
    fly status
    fly logs
    


    https://fly.io/docs/flyctl/

    今日の一句





    Elixir코뮤니티에 계속되는 방법은 下記가 오스스메입니다



    Elixir코뮤니티 の歩き方 -国内온라인編-
    https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian



    日本には28箇所のElixir코뮤니티가あります


    日程から イベントを探すなら Elixir イベントカレンダー📆



    ** Elixir아이벤트카렌다 **
    https://elixir-jp-calendar.fly.dev/





    「데코루」という言葉は piyopiyo.ex #7:感想投稿サイトをデコろう!(daisyUI、tailwind css)(2022/05/07)レポート から学びました.

    https://zenn.dev/koga1020/articles/b60725143bbadf6a2b5a#%E5%89%8D%E6%8F%90

    좋은 웹페이지 즐겨찾기