DEV Community: Candido Sales Gomes

Deploying Payload CMS to Fly.io

Candido Sales Gomes — Wed, 20 Nov 2024 04:27:40 +0000

Infra

Service	Memory	Disk	CPU
PostgreSQL	256 MB RAM	1 GB	1 (shared)
PayloadCMS (Node)	1 GB RAM	1 GB	1 (shared)
Meilisearch	1 GB RAM		1 (shared)

Install Fly CLI

brew install flyctl

Follow the instructions and return to the command line.

fly auth login

Create the fly.toml and Dockerfile in your current project.

# fly.toml app configuration file generated for payload-app on 2024-11-19T22:14:01-05:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#

app = 'payload-app'
primary_region = 'gru'
kill_timeout = '5m0s'

[build]

[[mounts]]
  source = 'media'
  destination = '/opt/app/media'
  initial_size = '1gb'

[http_service]
  internal_port = 3000
  force_https = true
  auto_stop_machines = 'stop'
  auto_start_machines = true
  min_machines_running = 1
  processes = ['app']

[[services]]
  protocol = 'tcp'
  internal_port = 1337
  processes = ['app']

  [[services.ports]]
    port = 80
    handlers = ['http']

[[vm]]
  cpu_kind = 'shared'
  cpus = 1
  memory_mb = 1024

Create the Dockerfile. The example below is a multi-stage docker build of Payload for production.

# syntax=docker.io/docker/dockerfile:1

# From https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

FROM node:22.12.0-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
    if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
    elif [ -f package-lock.json ]; then npm ci; \
    elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
    else echo "Lockfile not found." && exit 1; \
    fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
    if [ -f yarn.lock ]; then yarn run build; \
    elif [ -f package-lock.json ]; then npm run build; \
    elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
    else echo "Lockfile not found." && exit 1; \
    fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

# Media folder
COPY --from=builder --chown=nextjs:nodejs /app/media ./media


USER nextjs

EXPOSE 3000

ENV PORT=3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
ENV HOSTNAME="0.0.0.0"
CMD ["node", "server.js"]

You must add standalone output for the NextJS to enable run in the Docker container.

next.config.js

import { withPayload } from '@payloadcms/next/withPayload'

/** @type {import('next').NextConfig} */
const nextConfig = {
    // Your Next.js config here
    output: "standalone",
}

export default withPayload(nextConfig)

Create migrate folder

Create a new migration file in the migrations directory.

First, set up the migrationDir in payload.config.ts

import { buildConfig } from 'payload'

export default buildConfig({
  // your config here
  db: postgresAdapter({
    pool: {
      connectionString: process.env.DATABASE_URI || '',
    },
    //  Add the path to migrations folder
    migrationDir: './src/migrations', // <<<<<<<
  })
})

Later, run the command below to generate the migrations in the folder.

npm run payload migrate:create

In order to run migrations at runtime, on initialization, you can pass your migrations to your database adapter under the prodMigrations key as follows:

// Import your migrations from the `index.ts` file
// that Payload generates for you
import { migrations } from './migrations'
import { buildConfig } from 'payload'

export default buildConfig({
  // your config here
  db: postgresAdapter({
    //  your adapter config here
    pool: {
      connectionString: process.env.DATABASE_URI || '',
    },
    migrationDir: './src/migrations',
    prodMigrations: migrations // <<<<<<<<<<
  })
})

Passing your migrations, as shown above, will tell Payload, in production only, to execute any migrations that need to be run before completing the initialization of Payload. This is ideal for long-running services where Payload is only initialized at startup.

Deploy

Before deploying, you have to create the database. So run the command below:

fly postgres create

After creating the database, copy the Connection string in the safe place. You will use it as a secret DATABASE_URI.

Generate your PAYLOAD_SECRET at https://randomkeygen.com/ and store it in a safe place.

Now, you will deploy the app.

fly launch

And later ...

fly deploy

The last step is to add the secrets in your app in Fly.io

And deploy again to update the secrets; now, it will work on the migrations in runtime.

fly deploy

Conclusion

The flow is simple, but I took too long to understand how to set up the migrations. I hope it will help you :)

Source

Migrate Strapi from Render to Fly.io

Candido Sales Gomes — Fri, 02 Aug 2024 01:23:31 +0000

I was having cost issues with the Render server, and I can't reduce the server for small machines. Most of my users are from Brazil, so I moved my Strapi to Fly.io, which enables reduced costs.

Fly.io better manages your VM using Firecracker, and I can choose servers located in Brazil (Guarulhos—Sao Paulo). It will provide a better experience for my users and better maintainability.

In this article, you will see all my steps to accomplish this migration.

My previous infrastructure was:

Render (Cost US$60.25/month)

Service	Memory	Disk	CPU
PostgreSQL	1 GB RAM	16 GB (using only 96 MB)	1 CPU
Strapi (Node)	2 GB RAM (using only 600MB)	1 GB (using only 0.28GB)	1 CPU
Meilisearch	1 GB RAM (using only 60MB)		1 CPU

Now ...

Fly.io (Cost US$9.16/month)

Service	Memory	Disk	CPU
PostgreSQL	256 MB RAM	1 GB	1 (shared)
Strapi (Node)	1 GB RAM	1 GB	1 (shared)
Meilisearch	1 GB RAM		1 (shared)

Deploy Strapi in Fly.io

Install Fly CLI

brew install flyctl

Follow the instructions and return to the command line.

fly auth login

Create the fly.toml, dockerfile and .dockerignore in your current project

fly.toml

# fly.toml app configuration file generated for app-name on 2024-07-29T15:46:53-04:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#

app = 'app-name'
primary_region = 'gru'
kill_timeout = '5m0s'

[build]

[[mounts]]
  source = 'uploads'
  destination = '/public/uploads'
  initial_size = '1gb'

[http_service]
  internal_port = 1337
  force_https = true
  auto_stop_machines = 'stop'
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']

[[services]]
  protocol = 'tcp'
  internal_port = 1337
  processes = ['app']

  [[services.ports]]
    port = 80
    handlers = ['http']

[[vm]]
  cpu_kind = 'shared'
  cpus = 1
  memory_mb = 1024

Multi-stage dockerfile using Alpine (it will reduce the image 4.3GB → 1.1GB)

dockerfile

FROM node:18-alpine3.18 AS build_image

# Installing libvips-dev for sharp Compatability
RUN apk update && apk add --upgrade --no-cache vips-dev build-base fftw-dev gcc autoconf g++ make libc6-compat zlib-dev libpng-dev nasm bash --repository https://alpine.global.ssl.fastly.net/alpine/v3.18/community/

# Set working directory
WORKDIR /opt

# Resolve node_modules for caching
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn install

# Copy all for build and release cache if package.json update
COPY . .

ENV NODE_ENV=production
RUN yarn build

# Remove unnecessary files from node_modules - https://github.com/tj/node-prune
RUN wget https://gobinaries.com/tj/node-prune --output-document - | /bin/sh && node-prune

#------------------------------------------------------------------------------------

# Create a new namespace for the final Docker Image
FROM node:18-alpine3.18

# Installing openssh 
RUN apk --no-cache update && apk add openssh

# Installing vips-dev (https://www.libvips.org/) - https://github.com/strapi-community/strapi-plugin-local-image-sharp
RUN apk add vips-dev

# Set working directory
WORKDIR /opt/app

# Only copy your source code without the system file
COPY --from=build_image /opt ./

EXPOSE 1337

ENV NODE_ENV=production
ENV STRAPI_LOG_LEVEL=debug

CMD ["yarn", "start"]

.dockerignore

.tmp/
.cache/
.git/
build/
node_modules/
data/

Before launch, please copy and paste all environment variables in the .env file to make it easier to deploy

fly launch

Wait until the deployment finishes.

Strapi data transfer

Strapi provides an API to transfer data (schema, content, etc.) between servers. It’s pretty handy! Thanks, Strapi team!

First, we have to access your Strapi Admin in the Fly.io and generate a token that enables PUSH data

Create the token with PUSH permission.

Save the token in a safe place.

Access your Render server and run the following command in the root folder of the Strapi project (~/project/src). This command will send all data related to the database (entities and links) to your Fly.io server. It’s amazing! We will send the assets from the public folder later.
1. Unfortunately, I didn’t find a way to send the files (assets) because I received this error: [FATAL] restore failed Error: The backup folder for the assets could not be created inside the public folder. Please ensure Strapi has write permissions on the public directory. This issue is caused by the folder linked to the volume not having permission to run some strapi scripts into it.

npm run strapi transfer -- --to https://app-name.fly.dev/admin --exclude files

Now paste the transfer token when you are asked.

Waiting until finish the transfer.

Later you can check in the Fly.io if the content is there.

Next, transfer all environment variables of .env file for Secrets in Fly.io

Now we going to send the files (images)

Backup Render public folder

Access the server via SSH. How to set up your SSH connection.

ssh YOUR_SERVICE@ssh.YOUR_REGION.render.com

Compress the public folder.

zip -r public.zip public

Close the SSH connection.

exit

You can transfer files using SCP. Copying a file from your service to your local machine

scp -s YOUR_SERVICE@ssh.YOUR_REGION.render.com:/path/to/remote/file /destination/path/for/local/file

scp -s srv-cbtddcr19n0c5dqs15i0@ssh.oregon.render.com:/opt/render/project/src/public.zip ./strapi/public.zip

Next, we must create a folder called public_in your strapi root folder (locally). It will serve as a temporary folder to transfer the backup content. Now unzip the public.zip into the folder.

mkdir public_

# Unzip, after creating a public folder into the public_ 
# We must move the content of the public_/public for public_
unzip public.zip -d public_

# Enter into the folder, move the content and delete the unnecessary folder
cd public_ && mv public/* . && rm -rf public

# It should contain only robots.txt and uploads folder
ls

Now your project contains two public folders (one is public_ is a temp folder).

Now run the deploy.

fly deploy

During the deployment, all folders from the project will be copied into the docker image so you can later access the VM and move the content.

Wait until the deployment finishes.

Now access via SSH the VM.

fly ssh console

Inside the VM, run the command below.

cp -r /opt/app/public_/. /opt/app/public
rm -rf /opt/app/public_

It will copy the content from public_to publicfolder and later delete the public_.

I know it’s pretty verbose and complex, but we have permission to perform this kind of operation only via SSH.

💡 I hope the Fly.io team will enable us to send files for our volumes without running a machine using sftp. I tried other alternatives using rsync and wireguard, which are the worst.

Check if the volume of the machine was increased (the default is 70MB). This is an indication that persisted in volume.

I hope this tutorial can help you migrate without pain.

Fly.io is one of the best money-saving options for anyone starting a small project. I no longer had any problems connecting to the bank; even with the reduction of infrastructure, there was no loss in user experience.

If you have any questions, please feel free to comment below.

References

How to organize Figma files for developers

Candido Sales Gomes — Tue, 22 Nov 2022 03:16:12 +0000

I going to share a simple tip that I find recently that helps the productivity of our team.

My team is using Jira to organize and track our tasks, and for each task that is related to design, the P.O. or S.M. adds the Figma link associated with the task, but sometimes the link breaks, and we lose exactly which page we are going to work on.

To solve this issue you can add a text at the top for each page and add the ID of the Jira task corresponding.

With that, the page can be easily searchable by Jira ID on the search field in Figma.

I hope this tip can be useful for your team.

If you have any another tip, please comment here :)

Deploying Strapi 4 to Digital Ocean App

Candido Sales Gomes — Mon, 15 Aug 2022 22:18:12 +0000

What is Strapi?

Strapi is an open-source headless Content Management System that offers you the chance to develop API with distinctive features. It's built on Node.js and works with any GraphQL enabled Frontend Frameworks.

You can create custom content types, relationships and media libraries for images and audio files with Strapi.

What is Digital Ocean App?

App Platform is a Platform-as-a-Service (PaaS) offering that allows developers to publish code directly to DigitalOcean servers without worrying about the underlying infrastructure.

Free SSL Certificate;
Straightforward UI;
You can choose the region;
Enables horizontal or vertical scaling;

Deploy

Go to the repository and click Deploy to Digital Ocean: https://github.com/candidosales/digital-ocean-app_render_strapi

You will be redirected to the page similar to the image below containing all information about the services that will be deployed. Click in Next.

In the next section, Environment Variables, fill up the env variables: ADMIN_JWT_SECRET, JWT_SECRET, APP_KEYS and API_TOKEN_SALT. You can use https://randomkeygen.com/.

In Info section, check if the project and region are correct.

In Review section, check the plan for each service, and click in Create Resources.

Waits until deployment is finished.

It's done 🎉!

You can access the Strapi admin via your https://xxxx-xxxx.ondigitalocean.app/admin and create a user account.

✨ Extra

In the same repository you can deploy on Render too 😁. The advantage of the Render is that it attaches a volume to store your images, which can be safe to store locally.

Added a Service Group Name and click in Apply.

It's just two clicks 🥲.

If you find any issues, please, comment below.

Feel free to improve the repository. Your contribution is welcome! 😃

Deploying Strapi 4 to Railway

Candido Sales Gomes — Wed, 03 Aug 2022 21:20:36 +0000

What is Strapi?

You can create custom content types, relationships and media libraries for images and audio files with Strapi.

What is Railway?

It's a PaaS (similar to Heroku) that allows you to connect your Git repository and with each commit or new PR you trigger an event to deploy your application. Railway has several very nice features:

Uses NixPacks to build the images;
Free SSL Certificate;
Straightforward UI;
Create multiple environments;
"Pay as you grow";

However, there are some features I wish it had:

More regions available - 🇧🇷 please (See the thread);
Access the application console via UI (Similar to Digital Ocean and Render);

Deploy

Create your account and create a new project

Search by Strapi and select the first option.

Add a valid name for your repository.

The railway will copy a project into your account during the deployment process. As shown in the image below, you will have to add the environment variables.

You can use the https://randomkeygen.com/ to fill up the ADMIN_JWT_SECRET,JWT_SECRET, APP_KEYS and API_TOKEN_SALT.

In that project is set up the Strapi with Postgres and Cloudinary. Cloudinary is responsible for managing your media library, so you must have a Cloudinary account.

In the Cloudinary, you copy your credentials.

Then paste it into the Railway Environment variables and click on Deploy.

Waiting the building and deploy!

It's done!

Now you can access the Strapi admin via your https://strapi-production-XXXX.up.railway.app/admin and create a user account.

Troubleshooting

One annoying thing about Strapi is that it doesn't have development mode enabled by default, so I can't create new collections.

I wasted a lot of time thinking that changing the NODE_ENV environment variable could solve it, but it didn't.

So I found another way to solve this.

An important thing to note: the current version deployed is v4.1.9.

To enable development mode and update the project we need to make a change to the project created by Railway in your Github account.

Change the file package.json to be like this:

{
  "name": "strapi",
  "private": true,
  "version": "0.1.0",
  "description": "A Strapi application",
  "scripts": {
    "develop": "strapi develop",
    "start": "strapi develop", // <<----- Here
    "build": "strapi build",
    "strapi": "strapi"
  },
  "devDependencies": {},
  "dependencies": {
    "@strapi/plugin-i18n": "4.1.9", // Upgrade to 4.3.2
    "@strapi/plugin-users-permissions": "4.1.9", // Upgrade to 4.3.2
    "@strapi/provider-upload-cloudinary": "4.1.9", // Upgrade to 4.3.2
    "@strapi/strapi": "4.1.9", // Upgrade to 4.3.2
    "pg": "8.7.3"
  },
  "author": {
    "name": "A Strapi developer"
  },
  "strapi": {
    "uuid": "35d7a084-3088-4d0b-869e-f503693ee8e5"
  },
  "engines": {
    "node": ">=12.x.x <=16.x.x",
    "npm": ">=6.0.0"
  },
  "license": "MIT"
}

To start Strapi in development mode, I changed the value for strapi develop in the command start.

⚠️ Don't forget to run yarn install to update the yarn.lock before pushing your commit.

You can see my commit here: https://github.com/candidosales/strapi-railway-deploy/commit/529cb16521f33a5d824a34a1de3f30868b122ff7

After pushing the commit, the build will start again and when finished ...

You can verify that it will be in the new version, and you can create new collections.

If you want to have more control over the media gallery and don't want to deploy using Cloudinary, in the following article, I'll teach you how to deploy Strapi 4 to Render.

Any feedback is welcome! 😄