linux上部署Flutter web 到Nginx服务器

2023-09-26 本文已影响0人 superFool

笔者的Linux系统是CentOS 7 (Core) 版本，其他版本命令可能略有不同
ps：可以通过下面的命令查看Linux系统版本

cat /etc/os-release

一、部署Nginx服务步骤

1. 更新系统：
在安装软件包之前，首先确保系统已更新到最新状态。在终端中运行以下命令：

sudo yum update

2. 安装Nginx：
使用以下命令来安装Nginx：

sudo yum install nginx

按照提示输入 "y" 确认安装。

3. 启动Nginx服务：
安装完成后，启动Nginx服务并设置它在系统启动时自动启动：

sudo systemctl start nginx
sudo systemctl enable nginx

4. 配置防火墙规则：（如果已经开放了80、443端口则可以跳过该步骤）
如果您启用了防火墙（FirewallD）, 请确保允许HTTP和HTTPS流量：

sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

5. 验证Nginx安装：
打开Web浏览器并访问服务器的IP地址或域名。如果一切设置正确，您将看到Nginx默认欢迎页面。

6. （可选）配置Nginx站点：
默认情况下，Nginx的主配置文件位于 /etc/nginx/nginx.conf，而虚拟主机配置文件位于 /etc/nginx/conf.d/ 或 /etc/nginx/sites-available/ 目录中（具体位置可能因系统配置而异）。您可以编辑这些配置文件来设置Nginx以服务特定的网站。

7. （可选）重新加载Nginx配置：
如果您对Nginx的配置文件进行了更改，要应用更改，可以执行以下命令重新加载Nginx配置：

sudo systemctl reload nginx

二、部署Flutter web到Nginx上

要部署Flutter Web应用到Nginx服务器，按照以下步骤操作：

生成Flutter Web应用程序：
首先，确保您已经在本地计算机上成功生成了Flutter Web应用程序。使用以下命令生成Flutter Web应用的静态文件：
```
flutter build web
```
这将在Flutter项目目录下的build/web目录中生成静态文件。
将Flutter Web应用程序上传到服务器：
将生成的静态文件上传到您的Nginx服务器。可以使用工具如SCP或SFTP，或者将文件打包成压缩文件，然后使用scp或rsync命令上传。

例如，使用scp命令上传到服务器：
```
scp -r /path/to/your/flutter/app/build/web user@server_ip:/usr/share/nginx/html/web
```
这将把Flutter Web应用的静态文件上传到Nginx的HTML根目录中。

PS：

'/usr/share/nginx/html/web'是'Nginx'的静态资源位置可以在'nginx.conf'中配置后面会讲
如果服务器是通过堡垒机访问的，需要先登录堡垒机使用堡垒机的文件传输功能把打包好的web传到服务器上

配置Nginx：
在Nginx上配置虚拟主机（如果尚未配置）。在Nginx配置文件中，您需要添加一个服务器块，以指定Web应用程序的根目录和其他相关配置。例如：

server {
    listen       80 default_server;  #80是http的端口，443是https的端口
    server_name  _; # 使用下划线来匹配任何主机名或IP地址

    location / {
        root /usr/share/nginx/html/web; #nginx静态资源根目录
         # 如果请求的文件不存在，将请求传递给index.html
        try_files $uri $uri/ /index.html;
    }

    # 可以根据需要配置其他选项，如SSL等
}

在上述配置中：

可以把 _ 替换为您的域名或服务器IP地址。
root 指令定义了Nginx应该在哪里查找静态资源文件。
使用以下命令测试Nginx配置是否正确：
```
sudo nginx -t
```

重新加载Nginx配置：
当您完成配置后，使用以下命令重新加载Nginx配置以使更改生效：
```
sudo nginx -s reload
```
访问Flutter Web应用：
Flutter Web应用程序现在应该已经部署到Nginx服务器上，并且可以通过浏览器访问。使用服务器的域名或IP地址访问应用程序，例如：
```
http://your_ip:80/index.html
```
能够在浏览器中看到Flutter Web应用程序。

PS:
nginx配置文件路径：

/etc/nginx/nginx.conf

修改配置：

vim /etc/nginx/nginx.conf

修改完后需要重新加载配置执行

sudo nginx -s reload

nginx静态资源位置:

/usr/share/nginx/html/web

linux上部署Flutter web 到Nginx服务器

一、部署Nginx服务步骤

二、部署Flutter web到Nginx上

猜你喜欢

热点阅读