Skip to content

AWS CDK written in Typescript. Template configuration to build a React repository managed by CodeCommit with CodePipeline.

License

Notifications You must be signed in to change notification settings

ShutoYamada/aws-s3-react-template

Repository files navigation

AWS S3 React Template

This repository contains an AWS CDK project that sets up infrastructure for hosting a static React application on Amazon S3, utilizing AWS CodeCommit for source control and AWS CodePipeline for automated deployments.

Prerequisites

Project structure

.
├── bin
│   └── aws-s3-react-template.ts        # CDK application entry point
├── lib
│   └── aws-s3-react-template-stack.ts  # Stack definition (contains the code you provided)
├── package.json         # Project dependencies
└── README.md            # This file

Usage

1.Clone this repository.

git clone https://github.com/ShutoYamada/aws-s3-react-template.git

2.Install the dependencies.

yarn

3.Set Enviroment Parameters.

Upon running the yarn command, a .env file will be automatically generated. Please refer to the .env.sample file and fill in the appropriate values.

4.Deploy the CDK stack.

※For the first time only, please execute the 'yarn bootstrap' command.

Execute the following command.

yarn deploy

The stack deployment will create the Amazon S3 bucket, AWS CodeCommit repository, and AWS CodePipeline. The output will include the repository clone URLs.

5.Clone the created CodeCommit repository and add your React application source code.

git clone <repository-clone-url-http>

Enter the pre-issued HTTPS Git credentials for CodeCommit.

5.1 Create React Application

cd <cloned-repository>
npm create vite@latest . --template react

Please create a React project following the command line instructions of Vite.

Next. Create a buildspec.yml file for your React project with the following format:

version: 0.2

phases:
  install:
    install:
    commands:
      - n 16.15.0
      - echo node -v
      - node -v
      - echo npm -v
      - npm -v
      - npm i yarn
      - echo yarn -v
      - yarn -v
  pre_build:
    commands:
      - echo Installing source from dependencies...
      - yarn
  build:
    commands:
      - echo Start build...
      - yarn run build

artifacts:
  base-directory: dist
  files:
    - "**/*"

cache:
  paths:
    - node_modules/**/*

Commit and push the changes to the master branch. The CodePipeline will automatically detect changes and deploy the updated React application to the Amazon S3 bucket.

6.Cleanup

To delete the created resources, run:

yarn destroy

Note that this will remove the S3 bucket, CodeCommit repository, and CodePipeline.

Additional Resources

Contributing

Feel free to submit issues or pull requests for improvements or bug fixes.

License

This project is licensed under the MIT License.

About

AWS CDK written in Typescript. Template configuration to build a React repository managed by CodeCommit with CodePipeline.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published