Главная » Руководства

Наслаждайтесь развертыванием приложений Phoenix, украшенных DaisyUI, на Fly.io (2022)

На чтение 6 мин. Просмотров 2 Опубликовано

Я слышал, что Tailwind и DaisyUI популярны в наши дни, и попробовал их, но у меня возникли трудности с развертыванием на Fly.io. В будущем я буду записывать удачные паттерны, чтобы мне было приятно их делать.

Украшение приложения Phoenix с помощью DaisyUI1Есть некоторые документы, которые тщательно объясняют метод и 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

Содержание
  1. Системные требования
  2. Регистрация на Fly.io
  3. Образец приложения git clone.
  4. Удалите файлы, связанные с развертыванием, из образца приложения
  5. Введите команду fly launch.
  6. Добавьте Node.js в ваш Dockerfile перед развертыванием
  7. Развертывание
  8. Полезные команды fly
  9. Сегодняшняя фраза дня
  10. Если вы новичок в сообществе Elixir, мы рекомендуем следующее
  11. Календарь событий Elixir 📆 для поиска событий по дате.

Системные требования

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.

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.
rm -rf rel fly.toml Dockerfile
Войдите в полноэкранный режим Выход из полноэкранного режима

Введите команду fly launch.

  • ? Название приложения
    • Введите название любого приложения и 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:V8uo66rOJJWUHMS@top2.nearest.of.mnishiguchi-test-1-db.internal: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'.
Войдите в полноэкранный режим Выход из полноэкранного режима

Для производственного приложения, вероятно, следует скопировать вывод должным образом. Если вы просто практикуете, то, вероятно, можете не обращать на это внимания.

Сохраните свои учетные данные в надежном месте, вы больше не сможете их увидеть!

Добавьте Node.js в ваш Dockerfile перед развертыванием

  • Если вы используете пакет tailwind Hex, вам не понадобится команда npm, но я понимаю, что Tailwind должен быть установлен с NPM, чтобы использовать плагины Tailwind, такие как DaisyUI 🤔.

Примечание: Автономный клиент Tailwind включает пакеты первого класса tailwind в предварительно скомпилированный исполняемый файл. Для стороннего плагина Tailwind Если вам требуется поддержка сторонних плагинов, см. инструкции по установке tailwind nodejs.

  # 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

  • 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 📆 для поиска событий по дате.

** Календарь событий ** Эликсир

https://elixir-jp-calendar.fly.dev/

  1. Слово «Декор» используется в piyopiyo.ex #7: Украсьте свой сайт подачи впечатлений! (DAISYUI, tailwind css) (2022/05/07) Узнал из отчета. 

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

Рекомендуем почитать:

Оцените статью
Procodings.ru
Добавить комментарий