DEV Community

hirooka kazuya
hirooka kazuya

Posted on

dev diary 20251109

#node #devjournal #npm #nextjs

1. Uninstallation and Cleanup

  • Uninstall Node.js. And delete all npm and Next-related folders. Confirm by running:

    node -v
next -v
npm -v

2. Node.js Installation

  • Install Node.js from the following link: https://nodejs.org/ja/download (Choose the Windows Installer (.msi) link toward the bottom of the page.)

  • Confirm by running:

    node -v
npm -v

3. Next.js Project Setup

  • Navigate to the directory where you want to create your project:

    cd C:\Users\hiroo

  • Set up the Next.js project. (Change the name):

    npx create-next-app@latest my-nextjs-app

  • Start the project:

    npm run dev

  • OK, close the command line once

    (The rest is omitted. Refer to dev diary 20251108 for details.)

4. Amplify Gen 2 Sandbox

  • Start the sandbox:

    npx @aws-amplify/backend-cli sandbox

    Note: **Delete any remaining resources in AWS CloudFormation* and delete the S3 buckets beforehand.*
    If you don't do this, the previous sandbox startup failed.

  • When this command is executed for the first time, Amplify Gen 2 performs the following processes:

    • Initialize the Amplify Project: Establishes the connection between the project and the AWS account.

Roadmap to Full-Stack Application Completion

The application development process generally proceeds through three main phases: Backend Development, Frontend Development, and Deployment (Hosting).

Phase 1: Backend Definition and Deployment (Amplify Gen 2 / RDS)

In this phase, the core cloud infrastructure of the application is defined as code and built on AWS.

Detailed Steps

  1. Finalize RDS Connection Definition
    • In amplify/data/resource.ts, make final adjustments to the PostgreSQL connection settings (secret management, VPC connection).
  2. Define Authentication Features
    • Code-define authentication (Cognito) for user registration, login, etc., in files like amplify/auth/resource.ts.
  3. Define Business Logic (Lambda)
    • Define Amplify Functions (Lambda) to execute complex access and business logic for RDS, and configure them to be placed within a VPC.
  4. Local Environment Validation (Sandbox)
    • Run npx amplify sandbox to deploy development resources within the AWS account and verify that authentication and data access function correctly.
  5. Retrieve Configuration File
    • Obtain the amplifyconfiguration.json file generated by the sandbox execution. This file contains the necessary information for the frontend to connect to the backend.

Phase 2: Frontend Development (Next.js / aws-amplify)

In this phase, the User Interface (UI) and logic are implemented in collaboration with the backend.

Detailed Steps

  1. Initialize Amplify Configuration
    • Perform initial setup using the aws-amplify library and amplifyconfiguration.json in the entry point of the Next.js app (e.g., _app.tsx).
  2. Integrate Authentication UI
    • Implement the signup/login screen using the Amplify UI library (or custom UI) and aws-amplify, and link it to the backend authentication features.
  3. Implement Data Access Layer
    • Implement features for displaying, registering, and updating data by calling Lambda functions (Amplify Functions) that interact with RDS, via the Amplify Data Client from Next.js pages and components.
  4. Complete UI/UX
    • Finalize all user-facing functionality (e.g., CRUD operations), including screen layout, design, and navigation.

Phase 3: Deployment and Production Operation (Amplify Hosting)

In this phase, the environment for publishing the application globally and continuous improvement is set up.

  1. Finalize RDS Connection Definition

    • In amplify/data/resource.ts, make final adjustments to the PostgreSQL connection settings (secret management, VPC connection).

  2. Push to Repository

    • Push the project to a version control system like GitHub.

  3. Set Up Amplify Hosting

    • Configure Amplify Hosting via the AWS console or the npx amplify pipeline command, and link it to the repository.

  4. Execute CI/CD Pipeline

    • Start the pipeline where Amplify automatically performs the Next.js build and the Amplify Gen 2 backend (CDK) deployment, triggered by a Git push.

  5. Set Up Domain and SSL

    • Configure a custom domain for the application and enable HTTPS connection (SSL certificate).
  * **Deploy Resources:** Deploys the specified AWS resources (Lambda inside a VPC, RDS connection settings, etc.) into your AWS account based on the definitions in the `amplify` folder.
  * **Generate Connection Configuration File:** Generates the necessary configuration file for frontend connection (e.g., `amplifyconfiguration.json`).
Enter fullscreen mode Exit fullscreen mode

Today, we will stop here. Run:

ampx sandbox delete
Enter fullscreen mode Exit fullscreen mode

Next time, we will start again with:

ampx sandbox
Enter fullscreen mode Exit fullscreen mode

Note: Before deleting, run npm install @aws-amplify/backend-cli.

Top comments (0)