原来web前端部署这么简单，进来看看

前言

有个朋友说前端技能大家大部分都会，就是部署项目这一块经验都比较稀缺，一直很想学一下。所以在这里写一篇简单的从零开始部署前端项目的全过程，感兴趣的掘友们或者想自己搭建项目部署的可以看一下这篇。

环境搭建

首先我们需要进行环境搭建主要就是服务器和nginx配置。

服务器

如果有服务器的直接可以通过远程工具远程到服务器（有服务器的可以 跳到前端资源 那一步开始阅读），我自己本身是用 xshell 软件进行远程连接的，挺好用的。若没有服务器的可以通过 VMWare软件 搭建一个虚拟机来实现，想实践的可以去 VMWare 官网下载一个可以试用一个月的，下载完之后还需要一个镜像文件，我下载的是 centos，具体下载流程可以参照这个。

下载完之后就可以去VMWare 新建虚拟机，然后就是傻瓜式下一步，遇到下面的界面，选择对应的iso镜像文件的路径即可，遇到设置用户名和密码的界面，要记得用户名和密码，后面要用到，之后就是一直下一步到完成。

安装完之后在左边的tab会出现对应安装好的虚拟机，这个时候启动即可

若是启动的过程中出现弹框报错 VMware提示此主机支持Intel VT-x但Intel VT-x处于禁用状态，大概率是BIOS设置的某一项为disable，所以大家需要自己的电脑进入bios设置，开启对应的选项并保存重启。

远程连接

这个步骤有服务器的可以直接跳过，有了服务器之后我们就可以先与服务器建立连接，这样后续操作部署之类的也会比较方便。

首先打开虚拟机的虚拟网络编辑器，位置如下

打开主机的命令行，查询ip配置，进行网络配置，要特别注意子网IP中网段要与本地电脑的网段必须保持一致

网关IP中网段必须要与本地电脑的默认网关的网段保持一致

上述配置完之后，就是右键虚拟机->设置->选择第2步中设置了Nat模式的网卡

然后就可以打开虚拟机的命令行，然后查看一下ip（输入命令 ifcofig）

然后就可以根据ip进行连接，我是通过xftp进行连接，用户名得用root这是默认超级管理员的用户名(因为后续部署前端项目需要该权限)，密码则是最开始配置虚拟机设置的密码，然后就远程成功了

前端资源

可以远程之后我们就可以直接将打包好的前端资源部署到服务器，以我为例，通过xftp将dist上传到服务器的路径/var/www/test

这个时候我们在我们的主机，浏览器访问远程ip，发现什么也没有

这是为什么？

因为我们没有进行nginx的映射，所以需要安装nginx

Nginx配置

执行以下命令安装nginx

js复制代码sudo yum install epel-release
sudo yum install nginx

启动nginx

Nginx配置

执行以下命令安装nginx

js复制代码

sudo yum install epel-release sudo yum install nginx

启动nginx

js复制代码sudo systemctl start nginx

启动完之后我们需要更改配置文件，配置文件路径在 etc/nginx/nginx.conf，主要配置是location，路径配置对应的前端项目路径，我们需要将其映射到我们的前端资源

js复制代码
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  localhost;

        location / {
            root   /var/www/test/;
            index  index.html index.htm;
        }
        

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

}

修改完之后重启nginx

js复制代码

sudo systemctl restart nginx

主机通过浏览器访问虚拟机ip，发现成功了

技术前沿拓展

作为一个程序员，你的认知不能仅局限于技术内，需要发散思维了解技术圈的前沿知识。细心的人会发现，开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。

针对这类问题，低代码把某些重复出现的场景、流程，具象化成一个个组件、api、数据库接口，避免了重复造轮子。极大的提高了程序员的生产效率。介绍一款程序员都应该知道的软件 JNPF 快速开发平台，很多人都尝试用过它，它是功能的集大成者，任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类，方便扩展；集成了代码生成器，支持前后端业务代码生成，实现快速开发，提升工作效率；框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用；后端框架支持 Vue2、Vue3。

应用体验：https://www.jnpfsoft.com/?csdnxue，如果你有闲暇时间，可以做个知识拓展。看完如果觉得有帮助，欢迎点赞、收藏、关注。