如何把webpack打包好的代码部署到Nginx服务器上

RiverLi 发布于2019-07-25 14:15 / 2381人阅读

摘要：代码被打包完成后下一步就是部署到服务器上，此文仅适合于前端代码是部署在操作系统的服务中。如图下前端代码放在目录中，目录就是刚刚前端打包完的代码。

在生产环境中部署前端代码

本文章前端代码是基于vue+webpack开发的

Nginx是一款轻量级的Web 服务器/反向代理服务器

首先，webpack配置如下

在开发过程中，我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中，可以运行npm run build进行上线打包

打包完成后，会发现项目中多了dist这个文件夹

执行结果和webpack的配置文件一致。

代码被webpack打包完成后下一步就是部署到服务器上，此文仅适合于前端代码是部署在windows操作系统的nginx服务中。
这里假设：
Windows操作系统：windows server 2008 64位
Nginx服务：nginx-1.12.2 64位

1.下载nginx-1.12.2 64位解压，假设nginx-1.12.2放在D:nginx-1.12.2目录中，nginx目录结构。如图下

2、前端代码放在D:nginx-1.12.2html目录中，dist目录就是刚刚前端打包完的代码。如图下

3、在D:nginx-1.12.2conf目录中，有个nginx.conf配置文件，进行编辑这个文件

4、假设前端的端口号为8082，如果端口号被占用，请修改为其它端口号。后台服务访问地址http://192.168.121.**:8080,

5、打开cmd控制台，进入目录D:nginx-1.12.2中，用start nginx命令启动服务，然后用tasklist /fi "imagename eq nginx.exe"，查看nginx服务是否启动。

4、如果改变配置文件时，需要用nginx -s reload 命令重启nginx工作进程。

5、关闭服务
nginx -s stop
nginx -s quit 安全关闭
taskkill /F /IM nginx.exe > nul 关闭所有nginx服务

如果有错漏请大家批评指出！

专线服务超融合服务器 web项目打包部署到服务器上把代码上传到服务器上把项目部署到云服务器上把网站部署到云服务器上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39900.html

前端项目部署

摘要：前端项目部署之前很少接触前端项目的部署，这次为了更全面的学习就在本机上装了一个虚拟机上，在虚拟机上练习了如何把一个写的项目部署到这个虚拟机的服务器上。前端项目部署之前很少接触前端项目的部署，这次为了更全面的学习就在本机上装了一个虚拟机上，在虚拟机上练习了如何把一个 react 写的 spa 项目部署到这个虚拟机的服务器上。由于 linux 也是刚接触不久，所以整个过程还是遇到了很多...

Aceyclee 2019-07-25 14:21 评论0 收藏0
（小白指南）在 Linux 服务器上安装 Nodejs、Nginx 以及部署 Web 应用

摘要：首先，的命令和并不能在全局使用。文章有意将浏览器不能访问服务器的两个问题写出来，是因为作者在排查问题的时候，发现在服务器直接访问的页面，能很好地检查排除问题在百度寻找问题答案的时候，发现这种做法也得到了不少人的肯定。前段时间要把项目部署到服务器，期间踩了不少的坑。故写下这篇文章，从零开始把自己部署的过程都记录下来，希望能给其他像我一样的小白一点帮助。如果有疏漏的地方，请各位客官指出，...

glumes 2019-07-25 14:06 评论0 收藏0
vue+webpack+nginx 部署在服务器非根目录下访问404问题

摘要：最近想把所有的前端项目都整合在两台机器上，通过负载访问如下路径域名域名域名这样的方式访问按照平时的打包方式，直接将打包好的包放到服务器上服务器路径并非平时的在中做好配置如下结果访问域名时一片红，各种找不到困扰了好几天，跟孙老板各种改最后终于最近想把所有的前端项目都整合在两台机器上，通过负载访问如下路径Https://域名/gameCenter/Https://域名/member/Ht...

codergarden 2019-07-25 14:09 评论0 收藏0