飞码网-免费源码博客分享网站

点击这里给我发消息

如何在Ubuntu 20.04上使用Nginx部署React应用?

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

介绍

您可以使用默认的 Create React App 构建工具将 React 应用程序快速部署到服务器。构建脚本将应用程序编译到一个包含所有JavaScript代码、图像、样式和HTML文件的单一目录中。有了单一位置的资产,您可以用最少的配置部署到Web服务器上。

在本教程中,您将在本地机器上部署一个React应用程序到运行Nginx的Ubuntu 20.04服务器上。您将使用Create React App来构建一个应用程序,使用Nginx配置文件来确定部署文件的位置,并将构建目录及其内容安全地复制到服务器上。在本教程结束时,你将能够构建和部署一个React应用程序。

前提条件

在你的本地机器上,你需要一个运行Node.js的开发环境;本教程是在Node.js 10.22.0版本和npm 6.14.6版本上测试的。要在macOS或Ubuntu 20.04上安装,请按照《如何在macOS上安装Node.js并创建本地开发环境》或《如何在Ubuntu 20.04上安装Node.js》中使用PPA安装部分的步骤进行安装。
一个用于部署的Ubuntu 20.04服务器,按照这个Ubuntu 20.04的初始服务器设置教程进行设置,包括一个启用了sudo的非root用户,一个防火墙,以及从本地机器的SSH访问。要在DigitalOcean Droplet上获得SSH访问权限,请阅读如何用SSH连接到Droplets。
一个注册的域名。本教程将全程使用your_domain。你可以购买一个域名从Namecheap,得到一个免费与Freenom,或使用您选择的域名注册商。
以下两个DNS记录为你的服务器设置。如果您使用的是DigitalOcean,请查看我们的DNS文档,了解如何添加它们的详细信息。

一个A记录与你的_domain指向您的服务器的公共IP地址。
一个带有www.your_domain的A记录指向您的服务器的公共IP地址。
按照如何在Ubuntu 20.04上安装Nginx的方法安装Nginx。确保你的域名有一个服务器块。本教程将以/etc/nginx/sites-available/your_domain为例。
建议您使用HTTPS证书来保护您的服务器。你可以通过 "如何在Ubuntu 20.04上使用Let's Encrypt保护Nginx "教程来实现。

第1步 - 创建React项目

在这一步中,您将使用Create React App创建应用程序,并构建锅炉模板应用程序的可部署版本。

要开始,请在本地环境中使用Create React App创建一个新应用程序。在终端中,运行命令来构建应用程序。在本教程中,该项目将被称为 react-deploy。

 
npx create-react-app react-deploy

 
npx命令将运行Node包,而无需将其下载到你的机器上。create-react-app脚本将安装你的React应用所需的所有依赖项,并将在react-deploy目录下建立一个基础项目。有关Create React App的更多信息,请查看教程How To Set Up a React Project with Create React App。

在下载和安装依赖项时,代码会运行几分钟。完成后,您将收到一条成功消息。如果你使用yarn而不是npm,你的版本可能会略有不同。

输出

Success! Created react-deploy at your_file_path/react-deploy
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-deploy
  npm start

Happy hacking!

按照输出中的建议,首先移动到项目文件夹中。
 
cd react -deploy

 
现在你有了一个基础项目,在本地运行它来测试它在服务器上的表现。使用npm启动脚本运行该项目。

 
npm start
 

当命令运行时,你会收到本地服务器信息的输出。

输出

Compiled successfully!

You can now view react-deploy in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

boilerplate React应用
React project template running locally


在终端中输入CTRL+C或⌘+C停止项目。

现在你已经有了一个在浏览器中成功运行的项目,你需要创建一个生产构建。用下面的方法运行create-react-app构建脚本。


npm运行构建
npm run build
 
这条命令将把JavaScript和assets编译到构建目录中。当命令完成后,你会收到一些关于构建数据的输出。请注意,文件名中包含了一个哈希值,所以你的输出会略有不同。

输出

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.21 KB  build/static/js/2.82f639e7.chunk.js
  1.4 KB    build/static/js/3.9fbaa076.chunk.js
  1.17 KB   build/static/js/runtime-main.1caef30b.js
  593 B     build/static/js/main.e8c17c7d.chunk.js
  546 B     build/static/css/main.ab7136cd.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

现在,构建目录将包含你的项目所需的所有文件的编译和最小化版本。在这一点上,你不需要担心构建目录之外的任何事情。您需要做的就是将该目录部署到服务器上。

在这一步中,你创建了一个新的React应用程序。你验证了应用程序在本地运行,你使用Create React App构建脚本构建了一个生产版本。在下一步中,您将登录到您的服务器上,了解在哪里复制构建目录。

第2步 - 确定Ubuntu服务器上的部署文件位置

在这一步,你将开始将你的React应用部署到服务器上。但在上传文件之前,你需要确定部署服务器上的正确文件位置。本教程使用Nginx作为Web服务器,但使用Apache的方法是一样的。主要的区别是配置文件将在不同的目录中。

要找到Web服务器将使用的目录作为项目的根目录,请使用ssh登录到你的服务器。
ssh username@server_ip
进入服务器后,在/etc/nginx/sites-enabled中查找你的Web服务器配置。还有一个名为sites-allowed的目录,这个目录包括不一定要激活的配置。一旦你找到了配置文件,在终端中用以下命令显示输出。
cat /etc/nginx/sites-enabled/your_domain
如果你的网站没有HTTPS证书,你会收到一个类似于这样的结果。
server {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }
}
如果你按照Let's Encrypt的前提条件来确保Ubuntu 20.04服务器的安全,你将收到这个输出。
server {

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = www.your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name your_domain www.your_domain;
    return 404; # managed by Certbot




}
你将把你的文件复制到那个位置。在下一行,你可以看到Nginx会寻找index.html文件。如果你在本地的构建目录中寻找,你会看到一个index.html文件,它将作为主入口。

退出Ubuntu 20.04服务器,回到本地开发环境。

现在你知道了Nginx将提供的文件位置,你可以上传你的构建。

步骤3 - 使用scp上传构建文件

此时,你的构建文件已经准备好了。你需要做的就是把它们复制到服务器上。一个快速的方法是使用scp将你的文件复制到正确的位置。scp命令是一种从终端复制文件到远程服务器的安全方法。如果配置了ssh密钥,该命令会使用它。否则,系统会提示你输入用户名和密码。

命令的格式是 scp files_to_copy username@server_ip:path_on_server。第一个参数是你要复制的文件。在本例中,你要复制的是 build 目录中的所有文件。第二个参数是你的证书和目标路径的组合。目标路径将与Nginx配置中的根目录相同:/var/www/your_domain/html。

将所有使用*通配符的构建文件复制到/var/www/your_domain/html。
scp -r ./build/* username@server_ip:/var/www/your_domain/html
当您运行该命令时,您将收到显示您的文件已上传的输出。你的结果会略有不同。

输出
 

asset-manifest.json                                                                                          100% 1092    22.0KB/s   00:00
favicon.ico                                                                                                  100% 3870    80.5KB/s   00:00
index.html                                                                                                   100% 3032    61.1KB/s   00:00
logo192.png                                                                                                  100% 5347    59.9KB/s   00:00
logo512.png                                                                                                  100% 9664    69.5KB/s   00:00
manifest.json                                                                                                100%  492    10.4KB/s   00:00
robots.txt                                                                                                   100%   67     1.0KB/s   00:00
main.ab7136cd.chunk.css                                                                                      100%  943    20.8KB/s   00:00
main.ab7136cd.chunk.css.map                                                                                  100% 1490    31.2KB/s   00:00
runtime-main.1caef30b.js.map                                                                                 100%   12KB  90.3KB/s   00:00
3.9fbaa076.chunk.js                                                                                          100% 3561    67.2KB/s   00:00
2.82f639e7.chunk.js.map                                                                                      100%  313KB 156.1KB/s   00:02
runtime-main.1caef30b.js                                                                                     100% 2372    45.8KB/s   00:00
main.e8c17c7d.chunk.js.map                                                                                   100% 2436    50.9KB/s   00:00
3.9fbaa076.chunk.js.map                                                                                      100% 7690   146.7KB/s   00:00
2.82f639e7.chunk.js                                                                                          100%  128KB 226.5KB/s   00:00
2.82f639e7.chunk.js.LICENSE.txt                                                                              100% 1043    21.6KB/s   00:00
main.e8c17c7d.chunk.js                                                                                       100% 1045    21.7KB/s   00:00
logo.103b5fa1.svg                                

当命令完成后,你就完成了。由于React项目是由只需要浏览器的静态文件构建的,所以你不必再配置任何服务器端语言。打开浏览器并导航到你的域名。当你这样做时,你会发现你的React项目。

在这一步中,你将一个React应用程序部署到服务器上。您学会了如何识别服务器上的web根目录,您用scp复制了文件。当文件完成上传后,你就可以在Web浏览器中查看你的项目了。

总结

当您使用Create React App时,部署React应用程序是一个快速的过程。您可以运行构建命令来创建部署所需的所有文件的目录。运行构建后,您将文件复制到服务器上的正确位置,将您的应用程序实时推送到网络上。

 

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()
内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: