简单的利用nginx部署前端项目

棘丶

网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上。

首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云官网去购买一台,趁现在阿里云搞活动。(ps:我并没有打广告)

然后我们准备我们的前端项目不管你是vue项目还是普通的jquery写的项目都是一样的,本文的前端项目是vue。

通过git把他克隆到我们的服务器下面,我的前端项目就放在/home

下面是我前端项目的目录和内容,我们主要是用到打包后的dist文件夹。

然后我们开始安装nginx

安装完之后我们简单的配置一下nginx

进入/etc/nginx/sites-enabled这个目录,然后复制一份default到当前文件夹名字为自己取,现在我命名为resume.zengjielin.top

然后我们修改resume.zengjielin.top文件的内容,如下

你只需要修改我红色框的部分

解释一下server_name 写你的域名

locations 写你的前端的目录所在的路径,可以通过命令pwd来查看你前端的路径,上面有截图。

然后保存,再重启一下你的nginx配置。

接下来我们访问我们的网站:resume.zengjielin.top(复制网站到浏览器打开查看结果)

使用nginx部署前端项目到服务器

技术标签: node.js  服务器  前端开发

一、把本地前端打包好的代码上传到服务器

例如:前端项目的dist文件夹即为打包好的代码

mac下使用scp命令直接把该文件传到服务器上 

scp -p -r /git-project/code/dist root@(服务器ip):/project

上面命令为把本地 /git-project/code/dist 文件传到 你服务器下的 /project目录下

服务器相应的目录下就有了dist文件

二、配置nginx

修改nginx.conf

位置在 /usr/local/nginx/conf

这里的8086端口如果是阿里云服务器的要先开启

修改好以后要重启nginx。

这里有坑。如果你发现修改了以后不起作用的话有以下解决方案

1.可能是之前的nginx服务还没关闭

可以使用命令   

ps aux | grep nginx

kill -9 6446 6447

关闭nginx服务

2.指定nginx开启时使用的配置文件

cd到启动nginx的目标 

cd /usr/local/nginx/sbin

启动nginx用指定的配置

nginx -c /usr/local/nginx/conf/nginx.conf

 

另附nginx常用命令

sudo nginx   (启动nginx)

sudo nginx -s reload    (重启nginx)

三、本地访问

上面两步做好以后在本地访问刚才在nginx.conf中设置的域名加端口就可以访问到了 

四、跨域请求

我们刚才设置nginx.conf的时候,有一个配置是

意思是后台开启服务的端口为8000,当我访问 server_name:8086/api/的时候就会流到后台开启的服务中。

所以在前端页面请求后台的时候域名和端口要为 server_name:8086/api/

例:下图为前端发起请求的路径

[](https://creativecommons.org/l...:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/a_wtf_pgm/article/details/105103958

阅读 200
9 声望
1 粉丝
0 条评论
你知道吗?

9 声望
1 粉丝
宣传栏