aws s3 静态网站_如何使用AWS S3构建React静态网站

aws s3 静态网站

There are a number of ways you can build a website with React such as Java with React, NodeJS with React, NGINX serving React, etc. For the single-page applications, all you need to do is to load the initial index.html. Once you load the index.html the React library kicks in and do the rest of the job like loading component, calling API calls, etc. What if there are no backend calls and you want to build a static website with React?

您可以通过多种方式使用React构建网站，例如Java与React，NodeJS与React，NGINX服务React等。对于单页面应用程序，您要做的就是加载初始index.html。 一旦加载index.html，React库就会启动，并完成其余工作，如加载组件，调用API调用等。如果没有后端调用，并且您想使用React构建一个静态网站，该怎么办？

AWS S3 is one of the options which provides low cost and highly reliable static website hosting solution. These static sites have only CCS, HTML, JS files, fonts, etc. In this post, we can see how we can build a static website with React and host that with the AWS S3.

AWS S3是提供低成本和高度可靠的静态网站托管解决方案的选项之一。 这些静态网站仅包含CCS，HTML，JS文件，字体等。在本文中，我们可以看到如何使用React构建静态网站并使用AWS S3托管该网站。

• Example Project

  示例项目

• Enough AWS S3 for this project

  该项目足够使用AWS S3

• Implementation

  实作

• Summary

  概要

• Conclusion

  结论

示例项目(Example Project)

Here is an example project which we can put in the AWS S3 for static website hosting. This is a simple profile page with a header and some sections.

这是一个示例项目，我们可以将其放入AWS S3中进行静态网站托管。 这是一个简单的配置文件页面，其中包含标题和一些部分。

// clone the project
git clone https://github.com/bbachi/my-profile-react.git// install dependencies and start the project
npm install
npm start

You can clone the project and run it on your machine. Here is the demonstration when you run it on your localhost and the port 3000.

您可以克隆项目并在计算机上运行它。 这是在本地主机和端口3000上运行时的演示。

Example Project 示例项目

该项目足够使用AWS S3(Enough AWS S3 for this project)

S3 is a storage solution from the AWS. There are some basic concepts that you need to know before working with AWS S3. There are so many things that you can do with S3 such as Bulk storage, management of objects with lifecycles, Object versioning, static website hosting, etc. We have Buckets, Objects, and folders.

S3是来自AWS的存储解决方案。 使用AWS S3之前，您需要了解一些基本概念。 您可以使用S3做很多事情，例如大容量存储，使用生命周期管理对象，对象版本控制，静态网站托管等。我们有存储桶，对象和文件夹。

Buckets: Buckets are the main storage container of S3 and it can group folders and files under one name. The bucket name should be unique across all of AWS accounts. You can only create 100 buckets per account and you can store unlimited files or data under each bucket. Once you create the bucket under one account and it can’t be transferred to another account. When we create a bucket you can choose whi