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执行。
1.在项目的 Web根目录 或者你想放置 React 应用程序的位置,创建应用程序所在的目录。大多数情况下,路径是/var/www
,但你可以根据需要调整路径和目录名称:
sudo mkdir -p /var/www/mydomain.com
2.设置新目录的权限,使之允许你的常规用户写入:
sudo chmod 755 -R /var/www/mydomain.com
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 deploy
4.执行脚本:
./deploy
出现提示时输入你的Unix密码。
5.在浏览器中,输入你的Linode域名或公共IP地址。如果部署成功,你将看到你的React应用程序。
6.对应用程序的src
目录进行一些更改,然后重新运行deploy
脚本。重新加载页面后,您的更改应在浏览器中可见。
部署可以是一个复杂的主题,在生产环境中需要考虑许多因素。本指南旨在成为个人项目的简单示例,并不一定适用于大规模的生产环境应用程序。
更高级的构建和持续集成工具(如Travis,Jenkins和Wercker)可用于自动化更复杂的部署工作流程。这包括进行部署和部署到多个服务器(如测试环境和生产环境)可以运行单元测试。 请参阅我们的Jenkins和Wercker指南。
有关这个话题的其他信息,您可能需要参考以下资源。虽然提供这些是希望它们有用,但请注意,我们无法保证这些资源的准确性或及时性。