前端部署解决方案

前言

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

环境搭建

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

服务器

如果有服务器的直接可以通过远程工具远程到服务器(有服务器的可以**「跳到前端资源」那一步开始阅读),我自己就是用「xshell」软件进行远程连接的,挺好用的。如果没有服务器的可以通过「VMWare软件」搭建一个虚拟机来实现,想要的做法可以去VMWare官网下载一个可以初始化的,下载完之后还需要一个镜像文件,我下载的是「centos」**,具体流程下载可以参照这个。

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

前端部署解决方案_第1张图片

安装完成之后在左边的选项卡会出现安装好的虚拟机,这个时候启动即可

前端部署解决方案_第2张图片

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

前端部署解决方案_第3张图片

远程连接

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

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

前端部署解决方案_第4张图片

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

前端部署解决方案_第5张图片

「网关IP中网段必须与本地计算机的默认网关的网段保持一致」

前端部署解决方案_第6张图片

接下来配置完成之后,就是选择右键虚拟机->设置->第2步中设置了NAT模式的休眠

前端部署解决方案_第7张图片

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

前端部署解决方案_第8张图片

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

前端部署解决方案_第9张图片

前端资源

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

前端部署解决方案_第10张图片

此时我们在我们的主机上,浏览器访问远程ip,发现什么也没有

这是为什么?

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

Nginx配置

执行以下命令安装nginx

sudo yum install epel-release
sudo yum install nginx

启动nginx

sudo systemctl start nginx

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

# 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

sudo systemctl restart nginx

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

前端部署解决方案_第11张图片

你可能感兴趣的:(前端)