用妙招创造安全、快速的PWA项目

从构建到部署，直击重点

这篇文章是本系列的最后一篇，由于最近楼主一直忙于毕设，所以这也是一篇被鸽了很久的文章。现在，我们将把重点放在部署部分，包括：

• 如何将该项目部署到nginx服务器上
• 如何为它配置证书，使其运行在https协议上

不要着急，这是一个基于creat-react-app2的pwa项目，可以为你带来意想不到的惊喜。

部署到nginx服务器

第一步，你要做的就是确保你的服务器已经安装了nginx。

接下来，你需要创建一个新的nginx配置文件。你可以把它命名为pwa.conf，并把它放在/etc/nginx/sites-available目录下。

server {
  listen 80;
  server_name pwa.example.com;

  location / {
    root /var/www/pwa;
    index index.html;
  }
}

别忘了，你需要用你自己的域名替换pwa.example.com。

现在，你需要创建一个符号链接，将你的新配置文件链接到/etc/nginx/sites-enabled目录。

ln -s /etc/nginx/sites-available/pwa.conf /etc/nginx/sites-enabled/

最后，你需要重新启动nginx。

sudo service nginx restart

现在，你的项目应该已经部署到nginx服务器上了。

为你的项目配置证书

为了让你的项目在https协议上运行，你需要为它配置一个证书。

你可以使用Let's Encrypt来获取免费证书。

首先，你需要安装certbot。

sudo apt-get install certbot

接下来，你需要运行以下命令来获取证书。

sudo certbot certonly --nginx

当系统提示你输入域名时，请务必输入你希望为其配置证书的域名。

系统将会自动为你配置证书并将其安装到你的服务器上。

现在，你需要修改nginx配置文件，使其使用新的证书。

打开/etc/nginx/sites-available/pwa.conf文件，并在server块中添加以下代码：

listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/pwa.example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/pwa.example.com/privkey.pem;

别忘了用你自己的域名替换pwa.example.com。

现在，你需要重新启动nginx。

sudo service nginx restart

现在，你的项目应该已经运行在https协议上了。

总结

这篇文章向你展示了如何将基于react、cra2、typescript的pwa项目部署到nginx服务器上，并使其在https协议上运行。希望对你有所帮助！