How to Deploy a Next App?

Next.js is a powerful web framework that allows you to deploy your JavaScript apps. It provides a robust set of tools and features, including server-side rendering, automatic code splitting, and hot module replacement for efficient development.

In this guide, you'll configure a Next.js app and deploy it to Spheron Compute using Docker.

Prerequisites

To successfully follow this guide, you will need the following:

• A DockerHub (opens in a new tab) account.
• Nodejs (opens in a new tab) installed on your local machine.
• A text editor. You can use Visual Studio Code (opens in a new tab) or your favorite text editor.

Step 1: Create a Next App

1. Create a new Next.js project by running the following command:

   npx create-next-app nextapp

2. Change into the project directory:

   cd nextapp

3. Create a new file pages/api/hello.js and add the following code:

   export default function handler(req, res) {
     res.status(200).json({ message: "Hello, World!" });
   }

4. Start the development server by running the following command:

   npm run dev

5. Open your web browser and visit http://localhost:3000/api/hello. You should see the JSON response {"message": "Hello, World!"} displayed.

Check out the example here. (opens in a new tab)

Step 2: Create a Dockerfile

Here's what the dockerfile for this next app will look like:

# Use an official Node.js runtime as the base image
FROM node:14-alpine
 
# Set the working directory in the container
WORKDIR /app
 
# Copy the package.json and package-lock.json files to the container
COPY package*.json ./
 
# Install dependencies
RUN npm install
 
# Copy the app's source code to the container
COPY . .
 
# Build the Next.js app
RUN npm run build
 
# Expose the port that Next.js runs on
EXPOSE 3000
 
# Run the Next.js app
CMD ["npm", "start"]

Step 3: Set default platform for docker build

Docker images built with Apple Silicon (or another ARM64 based architecture) can create issues when deploying the images to a Linux or Windows-based AMD64 environment. Before running the docker build command, run this command in your terminal:

export DOCKER_DEFAULT_PLATFORM=linux/amd64

Step 4: Build a Docker image

To build the Docker image:

1. Save the above Dockerfile in the root directory of your Next app.
2. Open a terminal and navigate to the root directory of your project, where the Dockerfile is located.
3. Run the following command to build the Docker image:

docker build -t nextapp .

4. After the build process completes, you can run a container based on the image using the following command:

docker run -p 3000:3000 nextapp

Step 5: Push the app to DockerHub

To push an image, you first need to create a repository on Docker Hub.

Create a repo

To create a repository on Docker Hub:

1. Sign up (opens in a new tab) or Sign in to Docker Hub (opens in a new tab).
2. Select the Create Repository button.
3. For the repo name, use nextapp. Make sure the Visibility is Public.
4. Select the Create button.

Push the image

1. Login to the Docker Hub using the command docker login -u YOUR-USER-NAME.
2. Use the docker tag command to give the nextapp image a new name. Be sure to swap out YOUR-USER-NAME with your Docker ID.

docker tag nextapp YOUR-USER-NAME/nextapp

3. Now try your push command again. If you’re copying the value from Docker Hub, you can drop the tagname portion, as you didn’t add a tag to the image name. If you don’t specify a tag, Docker will use a tag called latest.

docker push YOUR-USER-NAME/nextapp

Here's what a Docker Image will look like on Docker Hub:

Check out this docker image here. (opens in a new tab)

Step 6: Run on Spheron Compute

To run your app on Spheron:

1. Click "New Cluster" on the top right corner.
2. Choose "Compute" to use CPU-based instances for running containers.
3. Choose your desired Compute Type option under Compute Type.
4. Select Import from Docker Hub.
5. Enter the names for your cluster and docker image.
6. Then, Add the tag and Click "Next."
7. Select your preferred Region, if any. If you do not add a region, the container will be deployed in any region for Spot, or in the eu-east region for On Demand. Click here to know more.
8. Spheron will automatically select the recommended plan for the specific template. If you intend to move forward with the recommended plan, Create new Port Policy Mapping and just Click "Deploy" to initiate deployment.
9. Select the instance plan that suits your needs. You can use the "Create Custom Plan" toggle to create custom plans for your CPU based instance.
10. Configure Storage (SSD) plan for your instance. Use the "Add Persistent Storage" toggle to add persistent storage for your instance.
11. Create new Port Policy Mapping. Add the container port, and Select the exposed port you want to map it to. Click here to know more.
12. Add Environment Variable, if any.
13. Add Secret Environment Variable if the value is a secret key. It will not be saved in the database. Click here to know more.
14. You can add advanced configuration if required. Click here to know more.
15. You can add health checkup if required. Click here to know more.
16. Click "Deploy" to initiate deployment.

Verify Installation

The Next App can be accessed only after the Compute Instance is provisioned. Thus, you need to wait for the installation to complete before you can start using the app. Your Apps can be verified for successful installation using the instructions below, while others may require different procedures.

Follow these instructions to verify the installation:

• Attempt to access the app
  An App has an estimated deployment time of about 1-2 minutes. If you can successfully access it, the installation has been completed successfully. You can connect using the connection URL of the instance, which will also be provided after the instance is provisioned.
• Check instance logs and events
  After successfully deploying your Next App, it will produce logs and events, which you can check for any issues or errors.

Common Errors

Docker Fails When Building on Apple Silicon

Docker images built with Apple Silicon (or another ARM64 based architecture) can create issues when deploying the images to a Linux or Windows-based AMD64 environment. Before running the docker build command, you must run this command in your terminal:

export DOCKER_DEFAULT_PLATFORM=linux/amd64