【前端摆设】Ubuntu22.04 使用nginx摆设vue前端项目教程

一.ubuntu安装nginx

1.更新本地软件包列表

1. sudo apt update

复制代码

2.安装nginx

1. sudo apt install nginx

复制代码

3.验证nginx是否安装乐成

1. sudo systemctl status nginx

复制代码

如果Nginx正在运行，则下令输出应该体现Active（active (running)）状态。

4.若nginx未运行，则输入下令举行启动

1. sudo service nginx start

复制代码

5.检察nginx版本信息

1. nginx -V

复制代码

6.欣赏器输入ubuntu所在服务器的ip所在

当我们看到如图所示，即阐明nginx安装乐成！
二.vue项目代码打包

方式一: 在vscode的终端输入

1. npm run build

复制代码

方式二: 点击如图的赤色方形部分的npm脚本举行项目代码打包

打包乐成,则终端输出信息如下

当前目次下天生的dist文件夹就是打包好的vue项目代码

三.ubuntu修改nginx设置文件

nginx是依靠于其设置文件举行工作的,其设置文件路径是/etc/nginx/nginx.conf
使用下面的下令来检察默认设置文件

1. cat /etc/nginx/nginx.conf

复制代码

如果你不想看到解释和空缺，可以使用以下下令只体现具体内容

1. cat /etc/nginx/nginx.conf
2. | grep -vE "#|^$"

复制代码

接下来我将每行举行解释(解释以#开头):

1. user www-data;                        # 运行 Nginx 的用户
2. worker_processes auto;                # 自动设置 worker 进程数为 CPU 核心数
3. pid /run/nginx.pid;                   # Nginx 的 PID 文件路径
4. include /etc/nginx/modules-enabled/*.conf;  # 包含模块配置文件
5. events {                              # 事件处理模块的配置
6.         worker_connections 768;       # 每个 worker 进程的最大连接数
7. }
8. http {                                # HTTP 核心模块的配置
9.         sendfile on;                  # 开启 sendfile 功能
10.         tcp_nopush on;                # 开启 tcp_nopush 功能
11.         types_hash_max_size 2048;     # 设置 types_hash_max_size 参数的值
12.         include /etc/nginx/mime.types; # 包含 MIME 类型定义文件
13.         default_type application/octet-stream; # 默认 MIME 类型
14.         ssl_prefer_server_ciphers on; # 开启 SSL/TLS 功能
15.         access_log /var/log/nginx/access.log; # 访问日志文件路径
16.         error_log /var/log/nginx/error.log;   # 错误日志文件路径
17.         gzip on;                      # 开启 Gzip 压缩
18.         include /etc/nginx/conf.d/*.conf;    # 包含其他配置文件
19.         include /etc/nginx/sites-enabled/*;  # 包含虚拟主机配置文件
20. }

复制代码

这里，我们只须要相识此中紧张的3个部分:

• 第1行的 www-data 是运行nginx的用户，反面我们须要把该用户加入当前ubuntu用户所属组，包管www-data有充足权限访问当前ubuntu用户目次下的前端文件(由于本人是把前端文件的路径添加在当前ubuntu用户目次下的)。
  
  
• 倒数第3行的 include /etc/nginx/conf.d/*.conf;可以明白为把路径/etc/nginx/conf.d下的全部以.conf末了的文件都复制到这里，而路径/etc/nginx/conf.d下的全部文件代表捏造主机设置文件。
  
  
• 倒数第2行的 include /etc/nginx/sites-enabled/*;可以明白为把路径/etc/nginx/sites-enabled下的全部文件复制到这里，当我们进入目次/etc/nginx/sites-enabled下,会发现只有default一个文件。
  
  总结一下，当nginx运行的时间，会加载设置文件/etc/nginx/nginx.conf,而这个设置文件内里包罗了目次/etc/nginx/sites-enabled下的全部文件(即文件default)
  
  这时可以参考之前检察 nginx.conf 的方式来检察default文件：
  1. cd /etc/nginx/sites-enabled

  复制代码
  1. cat ./default | grep -vE "#|^$"

  复制代码
  default文件内容如下:
  
  
  
  文件中的设置信息举行解释,(以 # 开头)
  1. # 虚拟主机的配置
  2. server {
  3.    # 侦听 80 端口，分别配置了 IPv4 和 IPv6
  4.    listen 80 default_server;
  5.    listen [::]:80 default_server;
  7.    # 定义服务器的默认网站根目录位置
  8.    root /var/www/html;
  10.    # 定义主页的文件名
  11.    index index.html index.htm index.nginx-debian.html;
  13.    # 定义虚拟服务器的名称
  14.    server_name _;
  16.    # location 块
  17.    location / {
  18.      try_files $uri $uri/ =404;
  19.    }
  20. }

  复制代码
  当我们在欣赏器访问网站的时间是默认80端口的，如果我们须要在其他端口访问网站，比方8080端口，则须要修改listen 80 为listen 8080,则访问网站的时间须要在ip所在反面加上:8080。
  如果我们想更改网站文件存放的路径，直接修改 root 的路径就可以了
  

四.摆设前端代码

明白上面内容后，我们可以开始摆设前端文件了。一样平常环境下，我们是不会去修改nginx原有的设置文件内容,而是别的添加一些关键的文件，使得nginx在运行的时间顺带实行咱们添加的文件来完成相应的功能。
1.进入目次/etc/nginx/sites-enabled,创建文件myweb.conf,名字可以恣意取，但是必须以.conf末了

1. cd  /etc/nginx/sites-enabled

复制代码

1. sudo touch myweb.conf

复制代码

把以下内容添加到myweb.conf文件内里：

1. server {
2.    listen 8070 default_server; #可以把8070修改为你需要设置的端口号
4.    root /home/ubuntu/project/dist; #你的前端文件存放的路径地址
6.    index index.html index.htm;  #保证你的dist文件夹下面有个文件叫做index.html
8.    server_name localhost;  #这里的localhost替换为你自己的ubuntu所在ip地址
9. ubuntu
10.    location / {
11.        try_files $uri $uri/ =404;
12.    }
13. }

复制代码

根据本身的环境举行以下修改：

• listen 8070 default_server;这里的8070可以修改为你须要设置的端标语
  
• root /home/ubuntu/project/dist;这里的/home/ubuntu/project/dist可以修改为你存放前端代码的具体路径，发起在当前ubuntu用户目次下新建一个project文件夹，把之前打包好的前端代码文件夹dist放在这里
  
• server_name localhost;这里的localhost更换为你本身的ubuntu所在的ip所在
  

总结一下，我们为什么要添加myweb.conf在目次/etc/nginx/sites-enabled下，由于之前有讲过nginx运行的时间是要加载目次/etc/nginx/sites-enabled下的全部文件，如许固然也就趁便把文件myweb.conf加载啦，而myweb.conf文件存放的是我们摆设的前端代码文件的一些信息，如许nginx就能加载到咱们的前端代码啦。
2.上传打包好的前端代码文件夹dist到当前ubuntu用户所在的目次下，如/home/ubuntu/project,该目次须要根据本身的环境举行相应的修改，须要包管与myweb.conf文件下的root行所在的路径同等即可。
3.把nginx用户www-data添加到当前ubuntu的用户所属组:
使用下令groups检察当前用户所属组，比方

可以看到赤色方框即为当前用户所属组，接着使用下令把用户www-data添加到当前用户组ubuntu

1. sudo usermod -a -G ubuntu www-data

复制代码

该下令根据本身现实环境举行修改。
我们可以检察当前用户组的全部用户，判定是否添加乐成：

1. getent group ubuntu

复制代码

可以看到，我们添加乐成了，如许nginx用户就有权限访问到咱们的前端代码啦！
4.在ubuntu所在的云服务器大概捏造机添加防火墙规则，答应访问8070端口:
我这里使用的是云服务器，因此须要添加防火墙规则

5.在欣赏器输入ip所在:8070即可访问到前端界面啦！