Website template docker build image

[BraianPita]

I am trying to setup a CI/CD pipeline using docker and I started with the website template that combines payload and nextjs into a single project.

I am trying to run the docker build command to then push to my registry, but it fails because it cannot connect to the database. Then, I realized this is an issue of the 'npm run build' command failing if there is no database connection when I run it, is there a way to avoid this? I cannot generate my image since I don't have access to the database when building it. This is my output:

npm run build

> [email protected] build
> cross-env NODE_ENV=production yarn build:payload && yarn build:server && yarn copyfiles && yarn build:next

yarn run v1.22.19
$ cross-env PAYLOAD_CONFIG_PATH=src/payload/payload.config.ts payload build
Done in 33.23s.
yarn run v1.22.19
$ tsc --project tsconfig.server.json
Done in 7.78s.
yarn run v1.22.19
$ copyfiles -u 1 "src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,js}" dist/
Done in 1.25s.
yarn run v1.22.19
$ cross-env PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js NEXT_BUILD=true node dist/server.js
[17:41:54] ERROR (payload): Error: cannot connect to MongoDB. Details: connect ECONNREFUSED ::1:27117, connect ECONNREFUSED 127.0.0.1:27117
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.```

[DanRibbens]

Hey @BraianPita,
For 2.x you can use this flag in your payload.init to disable connecting to the database on start. This is meant to help in your case of needing to build the project in an env where the DB won't be available or necessary:

await payload.init({
    disableDBConnect: true,
   secret: process.env.PAYLOAD_SECRET,
   //... etc.
})

The docs mentino it here: https://payloadcms.com/docs/getting-started/installation#disabledbconnect

[DanRibbens]

The missing styles.scss can be solved using the copyfiles function that we have in all of our template scripts:

"copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",

This needs to be a part of your build:

"build": "yarn copyfiles && yarn build:payload && yarn build:server",

[DanRibbens]

I see now you do have copyfiles in your build you shared earlier.

If you are coming from our templates, everything should work. It sounds like you maybe have moved some files around and the paths are no longer correct. If you compare to an existing template you can probably sort out what has changed: https://github.com/payloadcms/payload/tree/main/templates/website

[BraianPita]

@DanRibbens Thank you for the help. So far changing the disableOnInit: false did not fix the issue with beingTransaction. I still need to use the environment variable.

As for the build issues. I had to remove the config keyword and I figured that the issue was that the Dockerfile has the wrong path. At this line I had to change dist/payload.config.js into dist/payload/payload.config.js. That seems to be the correct path and it seems to have fixed the image for me. The docker-compose.yml file runs yan commands to build a development environment (as seen here) and that worked fine for me, but the moment I tried to use the built version using the docker image I built, it ran into the issue mentioned above.

[DanRibbens]

Are you using thie Dockerfile from our templates?

It is hard to diagnose and fix every env issue possible, but we do try and maintain working templates as guides.

[BraianPita]

I have been using my own Dockerfile that is based from the one on the template. I had issues using the original one since it gave me issues with the yarn commands. Instead, I decided to use npm instead. I also had to fix a few lines to get it to work as a standalone image that builds rather than the dev environment currently used by the docker-compose.yml on the template. I finally managed to get it to work (albeit with an environment variable I called BUILD_DOCKER_IMAGE that will set disableDBConnect: true,.

Here is my Dockerfile (Note that I had to add the .next folder to my runtime image since it was exiting with an error trying to reference "BUILD_ID" from that folder):

FROM node:18.8-alpine as base

FROM base as builder

WORKDIR /home/node/app
COPY package*.json ./

COPY . .
RUN npm ci
RUN npm run build

FROM base as runtime

ENV NODE_ENV=production
ENV PAYLOAD_CONFIG_PATH=dist/payload/payload.config.js

WORKDIR /home/node/app
COPY package*.json  ./
# COPY yarn.lock ./

RUN npm ci --omit=dev
COPY --from=builder /home/node/app/dist ./dist
COPY --from=builder /home/node/app/build ./build
COPY --from=builder /home/node/app/.next ./.next

EXPOSE 3000

CMD ["node", "dist/server.js"]

And my docker-compose.yml

services:
  payload:
    image: my-payload-image:latest
    ports:
      - '3000:3000'
    depends_on:
      - mongo
    env_file:
      - .env.docker

  mongo:
    image: mongo:latest
    ports:
      - '27017:27017'
    command:
      - --storageEngine=wiredTiger
    volumes:
      - ./data:/data/db
    logging:
      driver: none

volumes:
  # removed node modules since I had some issues but I might try to put it back in the future if it helps cut down in build time
  node_modules: