DEV Community

Zachary Alexander
Zachary Alexander

Posted on

How to dockerize the Nuxt3 Beta on AWS?

How to dockerize the Nuxt3 Beta on AWS?

Innovation is rampant in the Nuxt3 ecosystem. Nothing is safe. Everything we know about enterprise-grade web application development is up for grabs. With advances like the Vite bundler and the Nitro server, you could make the case that the entire javascript world stands to benefit. We might as well start exploring this new opportunity space with some low-hanging fruit like a docker container.

You could make the case that the docker container is the smallest component in modern web development. It is a building block used by more complex technologies like Amazon Elastic Container Service and Amazon Kubernetes Service. Just a heads up, real surprises will present themselves even at this level. For example, there is no dist directory created after the build. Nuxt3 uses a .output folder. Let's get started:

What are the Nuxt3 Prerequisites?

You need access to the following:

– AWS account

– Node

– Yarn

– Git

– Docker

– Docker-compose

– Visual Studio Code

How to install Nuxt3?

npx nuxi init <app-name>
cd <app-name>
yarn install
yarn build
code .
yarn dev
Enter fullscreen mode Exit fullscreen mode

Note: I like to run yarn build instead of yarn dev to build out all the directories for git. I run yarn dev to start the dev server.

How to install Tailwindcss?

Nuxt3 has caused many web developers to question everything, including how best to do style javascript code. A lot of Nuxt3/Vue developers are moving to Tailwindcss. You could make the case that tailwindcss is true to the single file component philosophy. On the other hand, the tailwindcss step is purely optional.

yarn add tailwindcss
npx tailwind init
Enter fullscreen mode Exit fullscreen mode

Note: the tailwind init commit will create the tailwind.config.js.

Configure tailwind.config.js as such:

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",    
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Create the tailwind.css file.

mkdir -p assets/css/ && touch assets/css/tailwind.css
Enter fullscreen mode Exit fullscreen mode

Configure the tailwind.css as such:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Add the following to nuxt.config.ts:

build: {
        postcss: {
          postcssOptions: {
            plugins: {
              tailwindcss: {},
              autoprefixer: {},
            },
          },
        },
      },
      css: [
        "~/assets/css/tailwind.css"
  ],
})
Enter fullscreen mode Exit fullscreen mode

Remove app.vue and create /pages/index.vue. index.vue.

mkdir pages && touch pages/index.vue
Enter fullscreen mode Exit fullscreen mode

Add content with tailwind styling to index.vue.

<template>
  <div class="container mx-auto bg-gray-300 p-8">
    <h1 class="font-bold text-gray-600 text-lg text-center">Hello, Tailwind 3!</h1>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

How to create our first Nuxt3 container?

Create the Dockerfile

# Dockerfile
FROM node:16-alpine3.14

# create destination directory
RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

# update and install dependency
RUN apk update && apk upgrade
RUN apk add git

# copy the app, note .dockerignore
COPY package.json .
RUN yarn install
COPY . .
RUN yarn build

EXPOSE 3000

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000

CMD [ "yarn", "start" ]
Enter fullscreen mode Exit fullscreen mode

Run the docker build command.

docker build -t <application name> .
Enter fullscreen mode Exit fullscreen mode

Create the docker-compose.yml, then copy the Docterfile to nuxt3.dockerfile so that you can use docker-compose.

version: '3.9'

services:
  nuxt3:
    build:
      context: .
      dockerfile: nuxt3.dockerfile
   ports:
      - 3000:3000
Enter fullscreen mode Exit fullscreen mode

What is the .dockerignore file and why do we need it?

The time it takes to build an image matters when you're working on a project. And the most time consuming part of this process is the node_modules. The best way to limit that process to include a .dockerignore like the described below.

Touch .dockerignore in the root directory and add the following configuration to the file.

node_modules
Dockerfile
.git/
.gitignore
.dockerignore
Enter fullscreen mode Exit fullscreen mode

How to add Nuxt3 docker image to AWS Elastic Container Registry

The next stage takes us into the AWS Cloud and removes a lot of the undifferentiated heavy lifting. There are over 200 technology services that we can explore and eventually adopt to improve the scalability of our workflow. So, we will start with the simple docker container you created earlier.

Open the AWS Console and navigate to the AWS ECR console. Click the "Create Repository" button. Next, enter the name of the repository you want to create. I entered nuxt3-aws. Make sure the visibility setting is set to private.

Image description

Edit the nuxt3.dockerfile and replace the FROM node entry with the following node URI.

<account number>.dkr.ecr.<region name>.amazonaws.com/ecr-public/docker/library/node
Enter fullscreen mode Exit fullscreen mode

Note: Replacing the Node entry will store the docker image in AWS ECR and result in a security enhancement. However, you will incur a cost if you exceed the Free Tier storage limits.

Click the Create Repository button at the bottom of the page.

Image description

Click on the newly created repository. It will open the repository page and show you the view push commands button.

Image description

Follow steps 1, 3, and 4. You can run the "docker-compose --build" instead of the docker build command on the command line.

Image description

Note: You can find the correct container by issuing "docker image ls" from the command line. The image at the top of the screen should be the one.

Conclusion

The nuxt3 opportunity space is vast. And nothing can be taken for granted. The journey will be uncomfortable and, at times, painful. With nuxt3 and AWS, we have to rethink how we have always done enterprise software development. The good news is some say that it reminds them of the early days of React. Hopefully, this article will entice you to take a walk on the wild side and check out what Nuxt3 has to offer.

Discussion (0)