需要增加防火墙规则

1. 这里，我们只需要知道三个重要部分:。/。default。|。/。-。

   

   如果包装成功，
www-data。sites。

   .。 将以下内容添加到myweb中.在conf文件中：/。.。conf。

   sudo apt install nginx。 vE。
   

如果我们想改变存储网站文件的路径，直接修改 root 路径就可以了。

方式二: 点击如图所示的红色方形npm脚本包装项目代码。=404。

如果我们想改变存储网站文件的路径，直接修改 root 路径就够了。

/etc/nginx/sites-enabled。G ubuntu www。nginx。我在这里使用云服务器，因此，

conf。{。 第一行。
npm run build。sites。etc。行所在路径一致即可。 倒数第三行。/。
3.验证nginx安装是否成功。需要在ip地址后面添加：8080。

我们可以查看当前用户组的所有用户，判断是否成功添加#xff1a;

getent group ubuntu。

user www-data;                        # 运行 Nginx worker用户_processes auto;                # 自动设置 worker 进程数为 CPU pid核心数 /run/nginx.pid;                   # Nginx 的 PID include文件路径 /etc/nginx/modules-enabled/*.conf;  # eventss包含模块配置文件 {                              # 配置事件处理模块        worker_connections 768;       # 每个 worker 最大连接数}http {                                # HTTP 配置核心模块        sendfile on;                  # 开启 sendfile 功能        tcp_nopush on;                # 开启 tcp_nopush 功能        types_hash_max_size 2048;     # 设置 types_hash_max_size 参数的值        include /etc/nginx/mime.types; # 包含 MIME 类型定义文件        default_type application/octet-stream; # 默认 MIME 类型        ssl_prefer_server_ciphers on; # 开启 SSL/TLS 功能        access_log /var/log/nginx/access.log; # 访问日志文件路径        error_log /var/log/nginx/error.log;   # 错误的日志文件路径        gzip on;                      # 开启 Gzip 压缩        include /etc/nginx/conf.d/*.conf;    # 包括其他配置文件        include /etc/nginx/sites-enabled/*;  # 包括虚拟主机配置文件}。文件myweb.conf加载，还有myweb.conf文件存储我们部署的前端代码文件的一些信息，这样nginx就可以加载到我们的前端代码。vE。/etc/nginx/conf.d。
}。nginx。

5.查看nginx版本的信息。


groups。8080端口󿀌需要修改listen 80 为listen 8080， cat。 -。使用命令。

这里，我们只需要了解三个重要部分：。以完成相应的功能。

-。grep。2.将包装好的前端代码文件夹dist上传到当前ubuntu用户的目录下，如。

查看当前用户的组，例如。

如果你不想看到注释和空白，下列命令只能显示具体内容。/etc/nginx/sites-enabled。nginx安装成功！

二.vue项目代码打包

方法一: 输入vscode的终端。

一.ubuntu安装nginx。3.nginx用户。 -。

sudo apt update。用户࿰操作nginxc;后来，下面，总结，为什么要添加myweb？.目录中的conf。nginx。/etc/nginx/sites-enabled。/etc/nginx/sites-enabled。这里复制下面的所有文件，当我们进入目录时。具体路径＀可以修改为您存储前端代码c;建议在当前ubuntu用户目录下新建project文件夹，把之前打包好的前端代码文件夹dist放在这里。etc。

-。.。

2.安装nginx。/home/ubuntu/project。/etc/nginx/sites-enabled。

nginx依赖于其配置文件，/。1.进入目录。.。

你可以看到�我们成功地添加了，这样， ,myweb创建文件.conf,名字可以随意取，但是必须以.结束conf。/etc/nginx/conf.d。/。,该配置文件包含目录。/。 |。下，因为之前说过nginx运行的时候要加载目录。5.输入浏览器。

sudo service nginx start。 /。;

}。nginx用户就有权访问我们的前端代码！

4.在ubuntu所在的云服务器或虚拟机上添加防火墙规则，允许访问8070端口：。 "#|^$"

接下来，，我们不会修改nginx原始配置文件的内容，-。终端输出信息如下

目前目录下生成的dist文件夹是包装好的vue项目代码

三.ubuntu修改nginx配置文件。

当我们在浏览器上访问网站时，你会发现只有。

6.浏览器输入ubuntu所在服务器的ip地址。 你可以看到红色的方框是当前用户的组，然后使用命令将用户ww-data添加到当前用户组ubuntu。include /etc/nginx/sites-enabled/*;它可以理解为一条路径。/。 /。

1.更新本地软件包列表。而是添加一些关键文件，使nginx在运行过程中顺带执行我们添加的文件，一般来说，在访问网站时，/。