记录--原来前端部署这么简单
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
前言
有个朋友说前端技能大家大部分都会,就是部署项目这一块经验都比较稀缺,一直很想学一下。所以在这里写一篇简单的从零开始部署前端项目的全过程,感兴趣的掘友们或者想自己搭建项目部署的可以看一下这篇。
环境搭建
首先我们需要进行环境搭建主要就是服务器
和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
1 2 | sudo yum install epel-release sudo yum install nginx |
1 | sudo systemctl start nginx |
启动完之后我们需要更改配置文件,配置文件路径在 etc/nginx/nginx.conf,主要配置是location,路径配置对应的前端项目路径,我们需要将其映射到我们的前端资源
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | # 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
1 | sudo systemctl restart nginx |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
2021-12-01 JS数据扁平化
2020-12-01 小程序瀑布流布局
2020-12-01 js千分位分隔,数字货币化方法学习记录
2020-12-01 彻底解决小程序无法触发SESSION问题
2020-12-01 JS实现植物大战僵尸小游戏,代码记录及效果展示
2020-12-01 太极图HTML+CSS(可旋转)代码记录