自学内容网 自学内容网

Nginx配置及部署前端项目,安排!

哈喽小伙伴们大家好!我是程序媛小李,一位正在往全栈方向发展的前端小姐姐,今天给大家分享一下在日常编码中我们是怎么使用nginx来部署前端项目的!

Nginx安装

浏览器输入nginx,来到官网

右边找到doewnload,在这里找到自己需要的版本,下载即可。

下载好之后解压一下,然后双击安装即可

安装好之后不需要额外的配置,直接双击.exe文件即可!

启动成功之后,浏览器输入localhost,如果能看到如下页面,说明我们的nginx服务是正常运行的。

接下来,我们讲一下部署的步骤

第一步,打开解压好的nginx目录,进入nginx这个文件夹下

将项目打包生成的dist文件夹放在这里

第二步,配置location

打开conf这个文件夹下的nginx.conf文件(这里如果你的目录跟我的不一样的话,建议把nginx卸载了重装一下)

server/location这里,按照自己的需求改一下就行,我这里改成了dist,因为我的静态文件在dist目录下。

location / {
            root   html;
            index  index.html index.htm;
        }

修改之后,重启nginx服务,在地址栏输入localhost,就可以看到项目运行的结果啦(为了验证效果可以暂停VScode本地的进程。

通过本文,大家可以看到使用nginx部署项目很简单,分分钟搞定!这也是nginx能够呗广泛用在web开发的原因之一!它有着很好的性能,轻量级,比较稳定,而且轻量级,还支持配置正向代理和反向代理。后面有机会给大家分享一下具体的应用场景和实战案例,尽情期待哦!

好啦!以上就是使用nginx上线前端项目的全部过程,希望对大家有所帮助。我是程序媛小李,一位正在往全栈方向发展的前端小姐姐,我们下期见!


原文地址:https://blog.csdn.net/m0_62300955/article/details/142589918

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!