原来前端部署这么简单 点击关注公众号回复”小册” 优惠券免费领!!前言有一个朋友说大家的前端技能大部分都会，就是部署项目这块经验都比较稀缺，一直很想学一下。所以这里写一篇简单的从零开始部署前端项目的全过程，感兴趣的掘友或者想要自己搭建项目部署的可以看一下这篇文章。 环境搭建首先我们需要进行环境搭建主要就是服务器和nginx配置。 服务器如果有服务器的直接可以通过远程工具远程到服务器（有服务器的可以「跳到前端资源」那一步开始阅读），我自己就是用「xshell」软件进行远程连接的，挺好用的。如果没有服务器的可以通过「VMWare软件」搭建一个虚拟机来实现，想要的做法可以去VMWare官网下载一个可以初始化的，下载完之后还需要一个镜像文件，我下载的是「centos」，具体流程下载可以参照这个。 下载完成之后就可以去VMWare新建虚拟机了，然后就是傻瓜式下一步，遇到下面的界面，选择对应的iso镜像文件的路径即可，遇到设置用户名和密码的界面，要记住用户名和密码，后面完成用途，之后就一直到下一步了。 安装完成之后在左边的选项卡会出现安装好的虚拟机，这个时候启动即可 如果启动的过程中出现弹框报错VMware提示此主机支持Intel VT-x但Intel VT-x处于禁用状态，很大概率是BIOS设置的某一项为disable，所以大家需要自己的电脑进入bios设置，打开对应的选项并保存重启。 远程连接步骤这个有服务器的可以直接跳过，有了服务器之后我们就可以先与服务器建立连接，这样后续操作配置之类的也比较方便。 首先打开虚拟机的虚拟网络编辑器，位置如下 打开主机的命令行，查询ip配置，进行网络配置，要特别注意「子网IP中网段要与本地电脑的网段必须保持一致」 部署_6.png「网关IP中网段必须与本地计算机的默认网关的网段保持一致」 部署_7.png接下来配置完成之后，就是选择右键虚拟机-设置-第2步中设置了Nat模式的休眠 然后就可以打开虚拟机的命令行，然后查看一下ip（输入命令ifcofig） 然后就可以根据ip进行连接，我是通过xftp进行连接，用户名得用root是默认超级管理员的用户名（因为后续配置接口项目需要该权限），修改密码最开始配置虚拟机设置的密码，然后就远程成功了 前端资源可以远程之后我们就可以直接将准备的前期资源部署到服务器，以我为例，通过xftp将dist上传到服务器的路径/var/www/test 图片.png此时我们在我们的主机上，浏览器访问远程ip，发现什么也没有 这是为什么？ 因为我们没有进行nginx的映射，所以需要安装nginx Nginx配置执行以下命令安装nginx sudoyuminstallepel-release sudoyuminstallnginx 启动nginx sudosystemctlstartnginx 启动完成之后我们需要更改配置文件，配置文件路径在etc/nginx/nginx.conf，主要配置是位置，路径配置对应的前端项目路径，我们需要将其映射到我们的前端资源 #Formoreinformationonconfiguration,see: #*OfficialEnglishDocumentation:http://nginx.org/en/docs/ #*OfficialRussianDocumentation:http://nginx.org/ru/docs/ usernginx; worker_processesauto; error_log/var/log/nginx/error.log; pid/run/nginx.pid; #Loaddynamicmodules.See/usr/share/doc/nginx/README.dynamic. include/usr/share/nginx/modules/*.conf; events{ worker_connections1024; } http{ log_formatmain'$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.logmain; sendfile tcp_nopush tcp_nodelay keepalive_timeout types_hash_max_size4096; include/etc/nginx/mime.types; default_typeapplication/octet-stream; #Loadmodularconfigurationfilesfromthe/etc/nginx/conf.ddirectory. #Seehttp://nginx.org/en/docs/ngx_core_module.html#include #formoreinformation. include/etc/nginx/conf.d/*.conf; server{ listen listen[::]:80; server_namelocalhost; location/{ root/var/www/test/; indexindex.htmlindex.htm; } #Loadconfigurationfilesforthedefaultserverblock. include/etc/nginx/default.d/*.conf; error_page404/404.html; location=/404.html{ } error_page500502503504/50x.html; location=/50x.html{ } } } 修改完成后重启nginx sudosystemctlrestartnginx 主机通过浏览器访问虚拟机ip，发现成功了 图片.png点击关注公众号回复”小册” 优惠券免费领!! 阅读原文