在Linode上部署React应用程序
在Linode上部署React应用程序
什么是React？
React是一个用于构建用户界面的流行JavaScript库。虽然React经常被用作更复杂应用程序的前端，但它也足够强大，可以单独用于完整的客户端应用程序。
由于基本的React应用程序是静态的（它由已编译的HTML，CSS和JavaScript文件组成），因此使用Rsync可以轻松地从本地计算机部署到Linode 。本指南介绍了如何设置Linode和本地计算机，以便你可以在进行更改时轻松部署应用程序。
开始之前
1.熟悉我们的入门指南并完成设置Linode主机名和时区的步骤。
2.本指南尽可能使用sudo指令，完成“ 确保服务器安全 ”部分以创建一个标准的用户帐户，加强SSH访问并删除不必要的网络服务。
3.你需要一个Web服务器，用于托管运行在Linode上的网站。
4.本指南假设你已经拥有了要部署的React应用程序。如果你没有，可以使用create-react-app快速生成应用程序。
5.确保你的系统上安装了Git：
sudo apt install git 6.更新你的系统：
sudo apt update && sudo apt-get upgrade配置Linode的部署
本节中的步骤应该在你的Linode执行。
创建主机目录
1.在项目的 Web根目录 或者你想放置 React 应用程序的位置，创建应用程序所在的目录。大多数情况下，路径是/var/www，但你可以根据需要调整路径和目录名称：
sudo mkdir -p /var/www/mydomain.com2.设置新目录的权限,使之允许你的常规用户写入：
sudo chmod 755 -R /var/www/mydomain.com配置Web服务器
1.确保你的web服务器在上面步骤中创建的文件路径进行配置。
Apache
修改虚拟主机文件的 DocumentRoot：
## /etc/nginx/sites-available/mydomain.com.conf
<VirtualHost \*:80>
ServerAdmin webmaster@mydomain.com
ServerName mydomain.com
ServerAlias www.mydomain.com
DocumentRoot /var/www/mydomain.com/ ## Modify this line as well as others referencing the path to your app
ErrorLog /var/www/mydomain.com/logs/error.log
CustomLog /var/www/mydomain.com/logs/access.log combined
</VirtualHost>NGINX
在你的站点修改server模块中以root 开始的行：
## /etc/nginx/conf.d/myapp.conf
server {
listen 80;
listen [::]:80;
root /var/www/mydomain.com; ## Modify this line
index index.html index.htm;
}2.重新启动Web服务器以应用更改。使用任何适用于Web服务器的命令：
sudo systemctl restart apache2
sudo systemctl restart nginx配置本地计算机
- 去到本地项目所在的目录。例如：
cd ~/myapp如果你没有可以使用的现有项目，可以使用create-react-app创建一个。
2.使用文本编辑器，在你的应用程序根目录中创建一个名为deploy的部署脚本。将exampleuser替换为受限帐户的用户名，以及替换mydomain.com为你Linode的FQDN或公共IP地址。
# ~/myapp/deploy
#!/bin/sh
echo "Switching to branch master"
git checkout master
echo "Building app"
npm run build
echo "Deploying files to server"
rsync -avP build/ exampleuser@mydomain.com:/var/www/mydomain.com/
echo "Deployment complete"此脚本将在Git上检出项目的主分支，执行npm run build构建应用程序，然后使用Rsync将构建文件同步到远程的Linode。如果你的React应用程序不是使用create-react-app构建的，则构建命令可能不同，并且构建的文件可能存储在不同的目录中（例如dist），需要相应地修改脚本。
3.使脚本可执行：
sudo chmod u+x deploy4.执行脚本：
./deploy出现提示时输入你的Unix密码。
5.在浏览器中，输入你的Linode域名或公共IP地址。如果部署成功，你将看到你的React应用程序。
6.对应用程序的src目录进行一些更改，然后重新运行deploy脚本。重新加载页面后，您的更改应在浏览器中可见。
下一步
部署可以是一个复杂的主题，在生产环境中需要考虑许多因素。本指南旨在成为个人项目的简单示例，并不一定适用于大规模的生产环境应用程序。
更高级的构建和持续集成工具（如Travis，Jenkins和Wercker）可用于自动化更复杂的部署工作流程。这包括进行部署和部署到多个服务器(如测试环境和生产环境)可以运行单元测试。 请参阅我们的Jenkins和Wercker指南。
更多信息
有关这个话题的其他信息，您可能需要参考以下资源。虽然提供这些是希望它们有用，但请注意，我们无法保证这些资源的准确性或及时性。