DEV Community

Daniel da Rocha
Daniel da Rocha

Posted on

Docker from development to deployment

Hi!

I've been trying to solve this for days now so I might finally just ask for help:

In my development docker-compose configuration, I have 4 containers:

  • front: Vue app started using npm run serve on port 80
  • back: Koa2 server for my API (Postgraphile for GraphQL)
  • database: Postgres container
  • front-balancer: Nginx server, sends / to front, /graphql to back

It works fine locally (although I probably should skip Nginx for development...)

Now I want to deploy it, and that's where my headaches began. My initial understanding is that I should not use npm run serve for front on production, but instead build my Vue app and serve the static files with Nginx.
But does that mean I do not need my front container in production and can just mount the built files to my Nginx container?

Or how would you approach this?

Then comes the actual deployment. I am still at a loss as to where (DO, Heroku, AWS??) and how to deploy it (CD workflow). But that might come as a later question once I figure out the step above!

Thanks in advance!

Top comments (9)

Collapse
 
franmako profile image
Francis O. Makokha

For building the Vue image, I use a multi-stage build with a build stage from a node image that builds the Vue project and then I copy the files to the production stage from an nginx image to serve the Vue project:

# build stage
FROM node:9.11.1-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:1.13.12-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Collapse
 
cristianpip3 profile image
CristianPip3

When I compile, and check in the browser, I see the Nginx home page, which says that welcome to nginx, not the vue application, any idea why?

Collapse
 
danroc profile image
Daniel da Rocha

That looks quite interesting. then later only push the production-stage image to your registry, right?

For development do you use Nginx at all?

Collapse
 
franmako profile image
Francis O. Makokha

Both stages are in the same dockerfile. And you end up with a single image. Here's the explanation from the official docker docs:

With multi-stage builds, you use multiple FROM statements in your Dockerfile. Each FROM instruction can use a different base, and each of them begins a new stage of the build. You can selectively copy artifacts from one stage to another, leaving behind everything you don’t want in the final image.

And for development, I don't use nginx. I just use the vue cli dev server. (npm run serve)

Collapse
 
anortef profile image
Adrián Norte

I would build images with the code inside instead of using volumes, that way you can tag them for pre, qa and prod or for rollbacks.

You would need a registry and some sort of server like jenkins or circleci to run the builds and generate the images.

As for the deployment... if you have the budget amazon ECS and ECR are good solutions but if you don't have that kind of budget you can use something like OVH and deploy a kubernetes or swarm and make the deployment the last step of the build on the pipeline on jenkins or circleci.

Collapse
 
danroc profile image
Daniel da Rocha

As for the deployment... if you have the budget amazon ECS and ECR are good solutions but if you don't have that kind of budget you can use something like OVH and deploy a kubernetes or swarm and make the deployment the last step of the build on the pipeline on jenkins or circleci.

DigitalOcean also recently started supporting Kubernetes. Seems to be a cheaper alternative?

But, could I start deploying without Swarm or Kubernetes? It seems it is one more step to complicate things when all I need is to have it online so I can keep iterating on its development. Maybe K8s/Swarm could be implemented later, when scale becomes an issue?

Collapse
 
anortef profile image
Adrián Norte

Kubernetes or Swarm are only needed if you want to go the dedicated server route if you can go to a managed solution like DigitalOcean or Amazon you don't need those.

Thread Thread
 
danroc profile image
Daniel da Rocha

And I assume deployment to DO or AWS would also be a simple step in the build on the pipeline on jenkins or circleci?

Thread Thread
 
anortef profile image
Adrián Norte

exactly