Skip to content

Commit 95afd3d

Browse files
SamyOubouazizSamyOubouaziz
committed
feat(srv): update
1 parent f256422 commit 95afd3d

File tree

1 file changed

+71
-15
lines changed
  • tutorials/hosting-webapps-serverless-containers

1 file changed

+71
-15
lines changed

‎tutorials/hosting-webapps-serverless-containers/index.mdx‎

Lines changed: 71 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,61 +20,117 @@ ecosystem:
2020

2121
import Requirements from '@macros/iam/requirements.mdx'
2222

23-
2423
<Requirements />
2524

2625
- A Scaleway account logged into the [console](https://console.scaleway.com)
2726
- [Owner](/iam/concepts/#owner) status or [IAM permissions](/iam/concepts/#permission) allowing you to perform actions in the intended Organization
2827
- Installed [Docker](https://docs.docker.com/get-started/get-docker/) or [Docker Egine](https://docs.docker.com/engine/install/)
2928
- [Created a Scaleway Container Registry namespace](/container-registry/how-to/create-namespace/) and [logged into it](/container-registry/how-to/connect-docker-cli/)
3029

31-
## Create and host a simple HTML static page
30+
## Create and host a basic Next.js web application
31+
32+
To host a Next.js web app on Serverless Containers, you must create a Next.js project, implement your pages and any API routes, and add a production-ready Dockerfile that builds and serves the app — either by running a Node server with `next build && next start` or by exporting static files with `next export` if your app is fully static. Build the container image locally, push it to the [Scaleway Container Registry](/container-registry/), and deploy it to [Scaleway Serverless Containers](/serverless-containers/).
3233

33-
To host a static HTML page on Serverless Containers, you first need to create a simple HTML page that will serve as your website. Next, you will write a Dockerfile to containerize your application, specifying how your HTML file should be served. You will then build the container image locally, and push it to the [Scaleway Container Registry](/container-registry/), before deploying it to [Scaleway Serverless Containers](/serverless-containers/).
34+
### Create your app and test it locally
3435

3536
1. In a terminal, run the command below to create a new folder and access it:
3637

3738
```bash
38-
mkdir my-static-website
39-
cd my-static-website
39+
mkdir my-nextjs-app
40+
cd my-nextjs-app
4041
```
4142

42-
2.
43+
2. Run the command below to create an example Next.js application using the default template. You can also use an example from the [official Next.js GitHub repository](https://github.com/vercel/next.js/tree/canary/examples).
44+
45+
```bash
46+
npx create-next-app@latest my-nextjs-app
47+
```
4348

49+
3. When prompted, configure your app according to your needs, or keep the default values to start quickly. Next.js will then create an app with a folder structure similar to the following:
4450

51+
```
52+
my-nextjs-app/
53+
├── app/ # Core: Routes using the App Router
54+
│ ├── layout.tsx # Root layout (shared across pages)
55+
│ ├── page.tsx # Homepage (http://localhost:3000)
56+
│ └── globals.css # Global styles
57+
│
58+
├── public/ # Static assets (served at /)
59+
│ ├── logo.svg
60+
│ └── favicon.ico
61+
│
62+
├── components/ # (Optional) Your reusable components
63+
│ └── ...
64+
│
65+
├── styles/ # (Optional) CSS modules or theme files
66+
│ └── ...
67+
│
68+
├── next.config.js # Next.js configuration file
69+
├── tailwind.config.js # If you chose Tailwind
70+
├── postcss.config.js # PostCSS setup (used with Tailwind)
71+
├── package.json # Dependencies and scripts
72+
├── package-lock.json # Locked dependencies
73+
├── .gitignore # Git ignore rules
74+
└── README.md # Auto-generated docs
75+
```
4576

46-
3. In the same folder, create a new `dockerfile` file and add the following code to it:
77+
4. Run the command below to run your application locally:
78+
79+
```bash
80+
cd my-nextjs-app
81+
npm run dev
82+
```
83+
84+
Access [http://localhost:3000](http://localhost:3000) to view the homepage of your web app.
85+
86+
### Build the app image and push it to Scaleway Container Registry
87+
88+
Before creating and pushing your image to the registry, make sure you have [Created a Scaleway Container Registry namespace](/container-registry/how-to/create-namespace/) and [logged into it](/container-registry/how-to/connect-docker-cli/).
89+
90+
1. Create a new `dockerfile` file at the root of your app folder, then add the following code to it:
4791

4892
```dockerfile
93+
# Build the Next.js app
94+
FROM node:18-alpine
95+
WORKDIR /app
96+
COPY package*.json ./
97+
RUN npm install
98+
COPY . .
99+
RUN npm run build
100+
101+
# Expose port and run server
102+
EXPOSE 3000
103+
CMD ["npm", "start"]
49104
```
50105

51-
4. Run the command below to build, tag, and push your image to the Scaleway Container registry:
106+
2. Run the command below to build, tag, and push your image to the Scaleway Container registry:
52107

53108
```bash
54109
docker build \
55110
--platform linux/amd64 \
56111
--push \
57-
-t <CONTAINER_REGISTRY_ENDPOINT>/my-static-website:latest .
112+
-t <CONTAINER_REGISTRY_ENDPOINT>/my-nextjs-app:latest .
58113
```
59114

60115
<Message type="note">
61116
You can find your Container Registry endpoint in the **Settings** tab of your Container Registry Endpoint in the [Scaleway console](https://console.scaleway.com/registry/namespaces)
62117
</Message>
63118

64-
5. [Deploy a Serverless Container](/serverless-containers/how-to/deploy-container/) with the following parameters:
119+
### Deploy your app using Serverless Containers
120+
121+
1. [Deploy a Serverless Container](/serverless-containers/how-to/deploy-container/) with the following parameters:
65122

66123
- **Registry**: Scaleway Container Registry
67124
- **Registry namespace**: the Container Registry namespace you pushed your image to.
68-
- **Container port**: `8O` as it is the [port](/serverless-containers/reference-content/port-parameter-variable/) exposed in the dockerfile.
69-
- **Resources**: `100 mVCPU` and `256 MB` memory
125+
- **Container port**: `3000` as it is the [port](/serverless-containers/reference-content/port-parameter-variable/) exposed in the dockerfile.
126+
- **Resources**: `1000 mVCPU` and `1024 MB` memory
70127
- **Autoscaling**: set a minimum scale of `1` to avoid [cold starts](/serverless-containers/concepts/#cold-start) (optional).
71128

72129
The deployment of your container can take up to a minute to complete.
73130

74-
6. Once your container is **ready**, click the **container endpoint** from its **Overview** tab. Your web page displays, and is available to anyone with the link.
131+
2. Once your container is **ready**, click the **container endpoint** from its **Overview** tab. Your web page displays, and is available to anyone with the link.
75132

76133
## Going further
77134

78-
- You can host a website composed of multiple pages in the `my-static-website` folder.
135+
- You can deploy an already existing app by building its image and pushing it to the Scaleway Container registry as explained above.
79136
- You can [add a custom domain](/serverless-containers/how-to/add-a-custom-domain-to-a-container/) name to your website.
80-
- You can host dynamic websites using dedicated frameworks for high-quality web applications.

0 commit comments

Comments
 (0)