nginx前端项目发布配置的详细教程
技术栈:react + umi。
背景:当我们在本地写好一个react项目时,这个项目可以在本地正常运行预览了,但是我们还需得让其他人也访问这个网站,这个时候就要配置nginx了,需要一台服务器,然后我们在服务器里面设置一块空间,并且映射一个域名,这样别人就可以通过这个域名来访问了。
这块知识点侧重于运维,但本文将以前端的视角来讲解,只会介绍一些简单命令及操作流程,便于前端开发者的日常开发。
0 前置
- Linux常用命令大全 blog.****.net/tianzongnih…
- Linux vim命令详解 www.cnblogs.com/zhongguiyao…
- Nginx常用配置和使用详解梳理 blog.****.net/wu6660563/a…
- Nginx常用命令 www.cnblogs.com/cb118651273…
1 初始准备工作
首先确保我们已经连接了对应的服务器地址,服务器地址的账号密码自行询问管理员。
然后Xshell软件的下载地址可点这里,提取码是:pgb5
,直接下载安装即可使用。
确保咱们已经连接上对应的服务器地址:
2 nginx下配置.conf文件
2.1 进入对应.conf文件的所在目录(问后端或运维),然后复制一个新的.conf文件,用于放置我们打包后的前端代码。
2.2 复制一份.conf文件(这里复制的是cloud-manage.conf
,如果不晓得复制哪个可问下后端或运维,如果没有这个文件,我理解需自行新建一个再编辑)。
2.3 然后再对这个.conf文件里面的内容进行编辑 。
(1)打开这个文件
(2)根据需求更改(不明白问下后端或运维),我这里只改了画框的那部分。
然后按
esc
键,接着在哪shift
+:
,输入wq!
(强制保存并退出的意思),回车。这里说个小细节:当我们输入文件名,可先只打开头一两个字母,然后按
Tab
键会自动补全。
(3)cat 文件名 查看我们刚刚编辑的文件
ok,看来刚刚保存成功了,继续下面的操作。
(4)重启一下nginx
3 配置dns
(1)进入要配置dns的那个文件目录(具体目录可问后端或运维),进行编辑,配置dns
(2)我在这里添加了一个我的项目对应的域名,然后按esc
键,接着在哪shift
+:
,输入wq!
(强制保存并退出的意思),回车保存退出。
之后依然可以按cat + 这个文件名查看是否添加正确。
(3)进入这个目录reload热启动一下
(至于你要进哪个目录,可问后端或运维,我这里进的是这个目录)
4 把打包的前端文件上传到对应的地址目录下,访问即可。
这里我用FileZilla软件手动在这个位置建了个目录,然后我们把前端打包的dist文件夹里面所有内容直接拖拽到里面,然后我们就可以通过域名来访问啦。
注:由于我们配置的端口不同,当我们访问域名浏览器依然显示无法访问,可通过http来试试,不要用https。
5 发布效果展示
到此,前端对于nginx相关的配置及发包流程已经完毕,我们可以通过刚刚配置的链接(dev.zhongtie.advertisement-manage)访问(需连接无锡vpn)。
线*问效果: