docker react_10分钟内即可实现具有安全性的React + Docker-CSDN博客

docker react

You've built a React app, but now you need to deploy it. What do you do? First, it's probably best to choose a cloud provider as they're typically low-cost and easy to deploy to.

您已经构建了一个React应用，但是现在您需要部署它。你是做什么？首先，最好选择一个云提供商，因为它们通常是低成本且易于部署的。

Most cloud providers offer a way to deploy a static site. A built React app is just JavaScript, HTML, and CSS. They're static files that can live on pretty much any web server. In fact, with JSX (HTML in JS) and Styled Components, you could even say it's just JavaScript!

大多数云提供商都提供了一种部署静态站点的方法。内置的React应用只是JavaScript，HTML和CSS。它们是静态文件，几乎可以在任何Web服务器上使用。实际上，使用JSX（JS中HTML）和样式化组件，您甚至可以说这只是JavaScript ！

Docker is the de facto standard to build and share containerized applications. You can use it to package your apps and include many open source web servers to serve up your app. As an added bonus, you can configure the webserver to send security headers that make your app more secure.

Docker是构建和共享容器化应用程序的事实上的标准。您可以使用它打包您的应用程序，并包括许多开源Web服务器来提供您的应用程序。另外，您可以配置网络服务器以发送安全标头，以使您的应用程序更安全。

Prerequisites:

先决条件：

创建一个React应用 ( Create a React App )

Rather than showing you how to build a React app, I'm going to cheat and use one that a colleague of mine already built. To begin, clone the repo.

与其向您展示如何构建React应用，不如作弊并使用我的同事已经构建的一个。首先，克隆存储库。

git clone https://github.com/oktadeveloper/okta-react-styled-components-example.git react-docker
cd react-docker
npm install

This is a React app that uses Styled Components for its CSS and is secured by OpenID Connect (aka OIDC). You can read about how it was created in Build a React App with Styled Components.

这是一个React应用，其CSS使用了样式化组件，并由OpenID Connect（aka OIDC）保护。您可以在使用样式化组件构建React应用程序中了解其创建方式。

Log into your Okta developer account (you created one, right?) to register this app and enable OIDC authentication.

登录您的Okta开发人员帐户（您创建了一个，对吗？）以注册该应用并启用OIDC身份验证。

Go to Applications in the top menu
转到顶部菜单中的“ 应用程序 ”
Select Add Application > Single-Page App and click Next
选择添加应用程序 > 单 页应用程序 ，然后单击下一步。
On the settings screen, give your app a name like React Docker
在设置屏幕上，为您的应用命名，如React Docker
Make sure the ports are set to 3000 and the Login redirect URI is http://localhost:3000/callback
确保将端口设置为3000 ，并且登录重定向URI为http://localhost:3000/callback
Click Done
点击完成

The resulting screen will provide you with a client ID.

出现的屏幕将为您提供一个客户端ID。

Copy and paste the client ID into your application's src/App.js. The value for <yourIssuerURI> can be found in your Okta dashboard, under API > Authorization Servers. For example, mine is https://dev-133320.okta.com/oauth2/default.

将客户端ID复制并粘贴到应用程序的src/App.js 。 <yourIssuerURI>的值可以在Okta仪表板的“ API” >“ 授权服务器”下找到。例如，我的是https://dev-133320.okta.com/oauth2/default 。

function App() {
  return (
    <Router>
      <Security issuer='<yourIssuerURI>'
                clientId='<yourClientId>'
                redirectUri={window.location.origin + '/callback'}
                pkce={true}>
        <SecureRoute path='/' exact={true} component={Calendar}/>
        <Route path='/callback' component={LoginCallback}/>
      </Security>
    </Router>
  );
}

The \_<>__ brackets are just placeholders, so make sure to remove them_!

\ _ <> __只是占位符，因此请确保将其删除！

Start your app with npm start. You'll be redirected to Okta to authenticate, then back to your app. If you're not redirected, it's because you're already logged in. Try again in a private window to see the login process.

使用npm start启动您的应用npm start 。您将被重定向到Okta进行身份验证，然后返回到您的应用程序。如果您未重定向，那是因为您已经登录。请在私有窗口中重试以查看登录过程。

You'll see a simple, clean calendar, with today's date selected.

您会看到一个简单，干净的日历，并选择了今天的日期。

I'll admit it's a very simple app, but it'll do for demonstrating how to containerize with Docker.

我承认这是一个非常简单的应用程序，但是它将演示如何使用Docker进行容器化。

为什么选择Docker？ ( Why Docker? )

You might ask, "Why Docker? Doesn't that complicate things"?

您可能会问：“为什么使用Docker？这不会使事情复杂化吗？”？

Yes, I agree. Doing it with Docker is more complicated than doing a firebase deploy or git push for Heroku. However, it also gives you more control in case you really want to complicate things and manage your app with Kubernetes. 😛

是的我同意。使用Docker进行此操作比为Heroku进行firebase deploy或git push更复杂。但是，如果您真的想使事情变得复杂并使用Kubernetes管理您的应用程序，它还可以提供更多控制权。 😛

创建一个Dockerfile和Nginx配置 ( Create a Dockerfile and Nginx Configuration )

Create a Dockerfile in your root directory.

在您的根目录中创建一个Dockerfile 。

FROM node:14.1-alpine AS builder

WORKDIR /opt/web
COPY package.json package-lock.json ./
RUNnpm install

ENV PATH="./node_modules/.bin:$PATH"

COPY . ./
RUN npm run build

FROM nginx:1.17-alpine
RUN apk --no-cache add curl
RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \
    chmod +x envsubst && \
    mv envsubst /usr/local/bin
COPY ./nginx.config /etc/nginx/nginx.template
CMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
COPY --from=builder /opt/web/build /usr/share/nginx/html

This will build your project and add Nginx as a web server. It'll also install a version of envsubst that allows you to replace variables with environment variables, and set default values.

这将构建您的项目并将Nginx添加为Web服务器。它还将安装envsubst版本，该版本允许您用环境变量替换变量并设置默认值。

Create an nginx.config in the same directory:

在同一目录中创建一个nginx.config ：

server{
    listen       ${PORT:-80};
    server_name  _;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $$uri /index.html;
    }
}

This file configures Nginx to serve your React app as a SPA (where all routes go to index.html) and run on port 80 unless PORT is defined as an environment variable. There's two $$ in front of uri to prevent $uri from getting replaced with a blank value.

除非将PORT定义为环境变量，否则该文件将Nginx配置为将您的React应用作为SPA（其中所有路由都转到index.html ）并在端口80上运行。 uri前面有两个$$ ，以防止$uri被空白值取代。

使用您的React App构建Docker映像 ( Build a Docker Image with Your React App )

Make sure your Docker daemon is running with docker ps. Then, run the following command to build your Docker image. The react-docker value can be whatever you want to name your image.

确保您的Docker守护程序与docker ps运行。然后，运行以下命令来构建您的Docker映像。 react-docker值可以是您要为映像命名的任何值。

docker build -t react-docker.

When the process completes, you'll see something along the lines of the following message:

该过程完成后，您将看到以下消息的内容：

Successfully built 3211a1255527
Successfully tagged react-docker:latest

运行您的Docker + React App ( Run Your Docker + React App )

You can now run your React app via Docker on port 3000 using the docker run command.

现在，您可以使用docker run命令通过Docker在端口3000上运行React应用。

docker run -p 3000:80 react-docker

If you find these docker commands hard to remember, you can add a couple of scripts to your package.json file.

如果您发现这些docker命令难以记住，则可以将几个脚本添加到package.json文件中。

"docker": "docker build -t react-docker .",
"react-docker": "docker run -p 3000:80 react-docker"

Then you can run them with npm run docker and npm run react-docker.

然后可以使用npm run docker和npm run react-docker运行它们。

You'll likely be logged in automatically.

您可能会自动登录。

TIP: If you want to see an example that doesn't log you in right away, see our Okta React + Okta Hosted Login Example.

提示：如果您想看到一个没有立即登录的示例，请参阅我们的Okta React + Okta托管登录示例。

Pretty slick, eh?! You dockerized your React app in just a few minutes. 🎉

很漂亮吧？您在短短几分钟内就对您的React应用进行了docker化。 🎉

将您的React App部署到Heroku ( Deploy Your React App to Heroku )

Your app doesn't really exist until it's in production, so let's deploy it to Heroku. First, I'll show you can do it without Docker.

您的应用只有在正式投入生产后才真正存在，因此让我们将其部署到Heroku。首先，我将展示您可以在没有Docker的情况下做到这一点。

To begin, you'll need a Heroku account. Then, install the Heroku CLI.

首先，您需要一个Heroku帐户。然后，安装Heroku CLI 。

Open a terminal, log in to your Heroku account, and create a new app.

打开一个终端，登录到您的Heroku帐户，然后创建一个新应用。

heroku login
heroku create

You should now have a new heroku Git remote repository. You can confirm this with git remote -v.

现在，您应该有一个新的heroku Git远程存储库。您可以使用git remote -v确认这一点。

Create a static.json file in your root directory with security headers and redirect all HTTP requests to HTTPS.

在带有安全标头的根目录中创建一个static.json文件，并将所有HTTP请求重定向到HTTPS。

{
  "headers": {
    "/**": {
      "Content-Security-Policy": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self' https://*.okta.com;",
      "Referrer-Policy": "no-referrer, strict-origin-when-cross-origin",
      "Strict-Transport-Security": "max-age=63072000; includeSubDomains",
      "X-Content-Type-Options": "nosniff",
      "X-Frame-Options": "DENY",
      "X-XSS-Protection": "1; mode=block",
      "Feature-Policy": "accelerometer 'none'; camera 'none'; microphone 'none'"
    }
  },
  "https_only": true,
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}

For static.json to be read, you have to use the Heroku static buildpack.

要读取static.json ，必须使用Heroku静态buildpack 。

Commit your changes to Git, add the Node.js + static buildpacks, and deploy your React app.

将更改提交到Git，添加Node.js +静态buildpack，然后部署React应用。

git commit -am "Configure secure headers and static buildpacks"
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git
git push heroku master

Once the process completes, open your app in a browser using:

该过程完成后，使用以下方法在浏览器中打开您的应用程序：

herokuopen

You'll be redirected to Okta and likely see the following error:

您将被重定向到Okta，可能会看到以下错误：

The'redirect_uri' parameter must be an absolute URI that is whitelisted in the client app settings.

To fix this, you'll need to modify your Okta app to add your Heroku URL as a Login redirect URI. For example, https://gentle-peak-37809.herokuapp.com/callback.

要解决此问题，您需要修改Okta应用，以将Heroku URL添加为Login重定向URI 。例如， https://gentle-peak-37809.herokuapp.com/callback 。

You should now be able to log in and see your app running on Heroku! You can verify its security headers are A-OK on https://securityheaders.com.

现在，您应该可以登录并看到您的应用程序在Heroku上运行了！您可以在https://securityheaders.com上验证其安全标头是否正确。

In this deployment example, buildpacks do all the work for you. However, not every cloud provider has buildpacks. This is where Docker comes in.

在此部署示例中，buildpacks为您完成了所有工作。但是，并非每个云提供商都提供buildpack。这就是Docker进来的地方。

将Docker + React App部署到Heroku ( Deploy Your Docker + React App to Heroku )

Heroku has a couple of slick features when it comes to Docker images. If your project has a Dockerfile, you can deploy your app directly using the Heroku Container Registry.

当涉及到Docker映像时，Heroku具有一些出色的功能。如果您的项目具有Dockerfile ，则可以使用Heroku Container Registry直接部署应用程序。

First, log in to the Container Registry.

首先，登录到Container Registry。

heroku container:login

Then, create a new app.

然后，创建一个新的应用程序。

heroku create

Add the Git URL as a new remote to your app.

将Git URL添加为您的应用的新遥控器。

git remote add docker https://git.heroku.com/<your-app-name>.git

Then, push your Docker image to Heroku's Container Registry.

然后，将您的Docker映像推送到Heroku的Container Registry。

heroku container:push web --remote docker

Once the process has completed, release the image of your app:

该过程完成后，释放您的应用程序图像：

heroku container:release web --remote docker

And, open the app in your browser:

然后，在浏览器中打开该应用程序：

herokuopen --remote docker

You'll need to add your app's URI in Okta before you can log in.

您需要先在Okta中添加应用的URI，然后才能登录。

改善Docker中Nginx的安全标头 (Improve Security Headers for Nginx in Docker)

If you test your new Nginx in Docker site on securityheaders.com, you'll get an F.

如果在securityheaders.com上的Docker站点中测试新的Nginx，您将获得F。

To solve this, modify your nginx.config to add security headers.

要解决此问题，请修改您的nginx.config以添加安全标头。

server{
    listen       ${PORT:-80};
    server_name  _;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $$uri /index.html;
    }

    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self' https://*.okta.com;";
    add_header Referrer-Policy "no-referrer, strict-origin-when-cross-origin";
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains";
    add_header X-Content-Type-Options nosniff;
    add_header X-Frame-Options DENY;
    add_header X-XSS-Protection "1; mode=block";
    add_header Feature-Policy "accelerometer 'none'; camera 'none'; microphone 'none'";
}

After updating this file, run the following commands:

更新此文件后，运行以下命令：

heroku container:push web --remote docker
heroku container:release web --remote docker

Now you should get an A!

现在您应该得到一个A ！

使用Cloud Native Buildpacks创建您的React + Docker映像 ( Use Cloud Native Buildpacks to Create Your React + Docker Image )

In this post, you learned two ways to deploy your React app to Heroku. The first was to utilize buildpacks and git push. The second was to use Heroku's Container Registry and heroku container:push + heroku push:release.

在本文中，您学习了将React应用程序部署到Heroku的两种方法。首先是利用buildpacks和git push 。第二种是使用Heroku的Container Registry和heroku container:push + heroku push:release 。

Cloud Native Buildpacks is an initiative that was started by Pivotal and Heroku in early 2018. It has a pack CLI that allows you to build Docker images using buildpacks.

Cloud Native Buildpacks是一项由Pivotal和Heroku在2018年初发起的计划。它具有一个pack CLI ，可让您使用buildpacks构建Docker映像。

My good friend, Joe Kutner, is a Software Architect at Heroku and has been instrumental in making Cloud Native Buildpacks a reality. Joe was formerly the curator of the Java experience at Heroku, is an active committer on the JHipster project, authored The Healthy Programmer, and is a founding member of the Cloud Native Buildpacks core team. His advice when it comes to Docker is "don't use a Dockerfile if you don't have to".

我的好朋友Joe Kutner是Heroku的一名软件架构师，在实现Cloud Native Buildpacks方面发挥了重要作用。 Joe曾在Heroku担任Java经验的策展人，是JHipster项目的积极提交者，撰写了The Healthy Programmer ，并且是Cloud Native Buildpacks核心团队的创始成员。他对Docker的建议是“不必使用Dockerfile ”。

Joe was a big help in figuring out how to create a Docker image with buildpacks, so I credit him with the instructions below.

Joe在弄清楚如何使用buildpacks创建Docker映像方面提供了很大的帮助，因此我将以下说明归功于他。

To begin, install pack. If you're on a Mac or Linux, you can use Homebrew. If you're on Windows, you can install its executable.

首先，安装pack 。如果您使用的是Mac或Linux，则可以使用Homebrew。如果您使用的是Windows，则可以安装其可执行文件。

brew tap buildpack/tap
brewinstall pack

In the previous buildpacks example, I used Heroku's Node.js and static buildpacks.

在前面的buildpacks示例中，我使用了Heroku的Node.js和静态buildpacks。

The Heroku static buildpack isn't a "Cloud Native" buildpack. It uses the old (pre-cloud-native) API. That means it doesn't work with pack out of the box.

Heroku静态构建包不是“ Cloud Native”构建包。它使用旧的（云原生）API。这意味着它不会与工作pack开箱。

Luckily, Heroku does offer a cnb-shim you can use to make it work. Joe created a URL (https://cnb-shim.herokuapp.com/v1/heroku-community/static) for Heroku's static buildpack after converting it with cnb-shim.

幸运的是，Heroku确实提供了一个cnb垫片，您可以使用它来使其工作。在用cnb-shim转换后，Joe为Heroku的静态buildpack创建了一个URL（ https://cnb-shim.herokuapp.com/v1/heroku-community/static ）。

You do have to make one change before you can build and run the Docker image locally. Remove the **"https_only": true," line from **static.json.

在本地构建和运行Docker映像之前，您必须进行一项更改。 删除** "https_only": true,"来自**行static.json 。

Then, use the following command to build a Docker image with Node.js and the static buildpack (a.k.a., the same buildpacks you used on Heroku).

然后，使用以下命令通过Node.js和静态buildpack（也就是您在Heroku上使用的相同buildpack）构建Docker映像。

pack build react-pack --builder heroku/buildpacks --buildpack \
  heroku/nodejs,https://cnb-shim.herokuapp.com/v1/heroku-community/static

TIP: You can use pack set-default-builder heroku/buildpacks if you want to want to get rid of the --builder argument.

提示：如果要摆脱--builder参数，可以使用pack set-default-builder heroku/buildpacks 。

Once the process completes, you should be able to run it.

该过程完成后，您应该可以运行它。

docker run --rm -it --init -p 3000:3000 --env PORT=3000 okta

If you find these pack commands hard to remember, you can add them to your package.json.

如果发现这些pack命令难以记住，可以将它们添加到package.json 。

"pack": "pack build react-pack --builder heroku/buildpacks --buildpack heroku/nodejs,https://cnb-shim.herokuapp.com/v1/heroku-community/static",
"react-pack": "docker run --rm -it --init -p 3000:3000 --env PORT=3000 react-pack"

Then you can run them with npm run pack and npm run react-pack.

然后，您可以使用npm run pack和npm run react-pack来运行它们。

将您的React + Docker映像部署到Docker Hub ( Deploy Your React + Docker Image to Docker Hub )

You can easily share your Docker containers by deploying them to a registry, like Docker Hub. If you don't already have a Docker Hub account, you can create one.

通过将它们部署到Docker Hub等注册表中，可以轻松共享Docker容器。如果您还没有Docker Hub帐户，则可以创建一个。

Once you have an account, log in and push your image. In the example below, I'm using react-docker, but you could also use react-pack to deploy the buildpacks version.

拥有帐户后，登录并推送您的图像。在下面的示例中，我使用react-docker ，但是您也可以使用react-pack部署buildpacks版本。

docker login
docker image tag react-docker<your-username>/react-docker
docker push <your-username>/react-docker

This will tag it as latest by default. If you want to tag and push a particular version, you can use:

默认情况下，这会将其标记为latest 。如果要标记和推送特定版本，可以使用：

docker image tag react-docker<your-username>/react-docker:1.0
docker push <your-username>/react-docker

Then, someone else could pull and run it using:

然后，其他人可以使用以下命令拉动并运行它：

docker run -p 3000:80<your-username>/react-docker

将您的React + Docker映像部署到Heroku ( Deploy Your React + Docker Image to Heroku )

To deploy an existing image to Heroku you can use docker push. You have to use the following naming convention to tag and push the image.

要将现有映像部署到Heroku，可以使用docker push 。您必须使用以下命名约定来标记和推送图像。

docker tag<image> registry.heroku.com/<app>/<process-type>
docker push registry.heroku.com/<app>/<process-type>

For example, to deploy the react-pack image, you can do:

例如，要部署react-pack映像，您可以执行以下操作：

docker tag react-pack registry.heroku.com/fierce-eyrie-08414/web
docker push registry.heroku.com/fierce-eyrie-08414/web
heroku container:release web --remote docker

I tried this and noticed that HTTPS wasn't forced. I had to add "https_only": true back into static.json, then re-push.

我尝试了一下，发现并没有强制使用HTTPS。我必须将"https_only": true添加回static.json ，然后重新按下。

了解有关React和Docker的更多信息 ( Learn More About React and Docker )

In this tutorial, you learned how to use Docker to containerize your React application. You can do this manually with docker build or use Heroku's Container Registry to push and release projects with a Dockerfile. You can also use the pack command to leverage Cloud-Native + Heroku buildpacks when building a container.

在本教程中，您学习了如何使用Docker容器化您的React应用程序。您可以使用Dockerfile docker build手动执行此操作，也可以使用Heroku的Container Registry通过Dockerfile推送和发布项目。在构建容器时，您还可以使用pack命令来利用Cloud-Native + Heroku构建包。

You also learned that if you're using Heroku, its buildpacks make it even easier than Docker. With a simple git push, you can deploy your code and have it built on Heroku's servers.

您还了解到，如果您使用的是Heroku，它的buildpack使其比Docker更容易。通过简单的git push ，您可以部署代码并将其构建在Heroku的服务器上。

You can find the source code for this example on GitHub at oktadeveloper/okta-react-docker-example.

您可以在oktadeveloper / okta-react-docker- example上的GitHub上找到此示例的源代码。

The Okta developer blog and YouTube channel has more information on Docker and React.

Okta开发人员博客和YouTube频道提供了有关Docker和React的更多信息。

If you liked this tutorial, please follow @oktadev on Twitter or subscribe to our YouTube channel. If you have any questions, please leave a comment below.

如果您喜欢本教程，请在Twitter上关注@oktadev或订阅我们的YouTube频道。如有任何疑问，请在下面发表评论。