Building a Docker image for AWS x86–64 EC2 instance with Mac M1 Chip

Apple announced the first ARM-based M1 chips on November 10, 2020. For its high processing speed and energy efficiency, the M1 seems a desirable option for developers.

But changes always bring challenges. The reality is the new CPU has relatively much more comparability issues than Intel’s AMD64-based CPU despite its incredible performance.

Let’s talk about a bit of my personal experience with M1. As a beginner, it was even hard to start any project on my Mac M1 because many programming tools didn’t really work on this new machine, especially the package managers! Thankfully, there were lots of helpful articles that saved me.

From what I learned, I want to share how I managed to solve some issues and built a Docker container on AWS using the M1 machine.

Notice this is for absolute beginners so I’m going to explain as much in detail.

Can you use Docker on Mac M1?

Yes, Docker has a version compatible with M1 that supports ARM-based applications. I installed Docker Desktop application on my Mac M1.

You can check more details and download Docker for M1 here: https://docs.docker.com/docker-for-mac/apple-silicon/

Installation is required for further steps.

Let’s build with buildx!

Since buildx is an experimental feature, we first need to enable it in our setting to make sure we can use buildx command.

Run your Docker Application. Go to the settings

Click “Docker Engine” section

Edit the value then apply

Now we are all set!

It will take less then a minute to apply and restart your Docker application.

While it is re-starting, open the terminal.

To build our first Docker image, we are going to use Node.js and npm. Since you are using mac m1, you may be required to follow this article to install them.

You should see which versions are installed in your machine.

$ node -v
$ npm -v

Create our first react app using thenpx create-react-app command. It’s your choice where you wanna create your app. For this practice, I named it as react-demo inside the Project directory from the root.

$ npx create-react-app ~/Project/react-demo

You should see a message indicating it is successfully installed.

Go to the directory where your react app is installed.

$ cd ~/Project/react-demo

Make a Dockerfile using touch command. edit your Dockerfile with vi command.

$ touch Dockerfile
$ vi Dockerfile

edit mode

Now, copy the whole code below and paste it.

# build stage
FROM node:lts-alpine as build-stage
# set your working directory
WORKDIR /app
# install dependencies
COPY package*.json ./
# install package manager
RUN npm install
# add your app
COPY . .
# merge your static files (css and js)
RUN npm run build
# production stage
FROM nginx as production-stage
# add nginx
COPY --from=build-stage /app/build/ /usr/share/nginx/html
# the port number
EXPOSE 3000
# execute your app
CMD ["nginx", "-g", "daemon off;"]

Press shift key then : key. Write wq and press enter to save and exit.

before you exit the session the screen looks like this

We’ve done all our code writing. The only thing left to do is to build our image. Here is the build command:

$ docker buildx build -t ‘your-docker-user-name’/‘your-project-name’ --platform=linux/amd64 .

We are using buildx and -t for tag name. The platform is linux/amd64 because we are gonna deploy this app on AWS t2.micro instance which has x86_64 based architecture. Mind that x86_64, x64, AMD64, and Intel 64 are the same things. Only the Mac M1 you are using is ARM64 so that’s why we are trying to change its arch type using buildx.

Don’t forget you should not just copy and paste this command. You need to change 'your-docker-user-name' value to your docker username and 'your-project-name' to the name you want. For example, I did it as:

docker buildx build -t alexkyshim/react-app --platform=linux/amd64 .

If you don’t see your image, restart Docker application.

Congratulations! You just created your first docker image. Let’s test it out with docker runcommand. This will create a new container.

$ docker run -p 0:80 'your-user-name'/'your-app-name'

0 means the random port will be created for the host while 80 means docker container’s port.

You’re accessing the randomly generated port. The app is working

Since we set our host port as 0, the system automatically casts a random port for our host. Access to that port on your browser. You will see the app works.

You can also push your Docker image to Docker Hub.

We built an image with Linux/AMD64 platform.

I think it’s safe to say we are ready to deploy our image to the actual server.

What’s next?

We are going to deploy our Docker image to the AWS server using ECS and ECR. See you in the next article!