原来前端部署这么简单

前言

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

环境搭建

首先我们需要进行环境搭建主要就是服务器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

js 复制代码
sudo systemctl start nginx

启动完之后我们需要更改配置文件,配置文件路径在 etc/nginx/nginx.conf

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,发现成功了

相关推荐
三翼鸟数字化技术团队16 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei44 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华1 小时前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
原生高钙1 小时前
LLM大模型对话框实践:大文件的分片上传
前端
加兵柠檬水1 小时前
代码输出题,会这些就够了。
前端
Json20113151 小时前
Gin、Echo 和 Beego三个 Go 语言 Web 框架的核心区别及各自的优缺点分析,结合其设计目标、功能特性与适用场景
前端·golang·gin·beego