原理

本地与云端仓库建立连接，本地代码上传到云端仓库(Gitee 或者 GitHub等)
云端服务器与云端仓库进行连接，云端服务器拉取仓库代码
服务器上build工程。
配置好nginx.conf文件。
启动nginx后，就可以访问到部署的项目了。

条件

需要一个云端服务器(腾讯云，百度云，阿里云，华为云等)
下载安装git
服务器配置好nginx，nodejs，npm

具体步骤

1、没有服务器的，需要买一个
2.、给服务器搭环境

// 安装git
sudo yum install git
// 安装nginx
sudo yum install nginx
// 安装 nodejs
sudo yum install nodejs
// 安装 npm
sudo yum install npm

3、创建云端仓库，我用的是Gitee，直接创建就好
4、上传本地代码到云端仓库

// 在要上传的项目根目录下打开终端
//初始化
git init
// 本地与云端仓库建立连接
git remote add origin 【云端仓库的HTTPS链接】
// 将项目文件添加到缓存
git add .
// 提交
git commit -m "描述"
// 上传
git push

5、服务器和仓库建立连接

// 服务器回到根目录下
// 进入.ssh 文件夹
cd .ssh
//创建公钥
ssh-keygen
//创建之后，该文件夹下有一个 id_rsa.pub文件，打开这个文件
cat id_rsa.pub
// 复制这个文件的内容，回到Gitee仓库 --> 管理--> 部署公钥管理 --> 添加公钥, 把复制的内容粘贴进来。

6、服务器与仓库建立连接后，即可在服务器拉仓库的项目了。

// 在服务器上拉项目
// 可以创建一个方便自己管理的文件夹， cd 进这个文件夹，把项目拉到这个文件夹下
git clone 【仓库的HTTPS链接】
// cd 到这个项目的根目录，安装所需要的库或依赖
npm i
// 安装好依赖后，就可以build这个项目了。
npm run build
// build之后多出一个文件夹，react项目多出的文件夹是build，vue多出来的文件夹是dist
// 复制这个文件夹路径，即：xxx/xx/.../build 或者是 xxx/xx/.../dist

7、找到nginx的配置文件nginx.conf，修改这个文件的 server_name 和 root

server_name 服务器的ip地址;
root xxx/xx/.../build或者是 xxx/xx/.../dist;

这就部署好了！

在浏览器输入服务器的ip地址就可以访问到了部署的项目了。

8、后期维护，可以在服务器上修改代码；也可以在本地修改代码，再push到仓库，然后服务器pull下来；然后在build一下，就已经更新了。

记录一下，我的项目在： root/project/ 路径下
nginx配置文件在: root/etc/nginx/nginx.conf

云端服务器部署前端工程相关推荐

Windows服务器部署前端vue项目
阿里云Windows服务器部署前端vue项目准备工作下载node.js(略)http://nodejs.cn/download/ 下载Nginx http://nginx.org/en/downl ...
云服务器部署SpringBoot工程-瑞吉外卖项目
Linux部署SpringBoot工程-瑞吉外卖项目云平台:阿里云终端软件:Tabby Terminal 部署项目项目: SpringBoot-瑞吉外卖自己第一次从本地web项目搭建到云端部署发 ...
云服务器布置_使用云端服务器部署步骤（详细）
首先,购买云服务器,腾讯云或阿里云等等. 接下来我会使用腾讯云服务器进行操作. 登录云服务器之后,进行重置密码,密码要牢记先进行本地部署: 修改setting文件: DEBUG = False AL ...
一文搞懂使用Nginx服务器部署前端Web项目
1 Nginx简介与安装概要 Nginx 简介 Nginx 架构说明 Nginx 基础配置与使用 1.1 Nginx 简介 Nginx是一个高性能WEB服务器,除它之外Apache.Tomcat.J ...
前端项目部署，阿里云服务器部署前端项目，超详细
需求背景:作为一个前端,特别身处于中小公司时,对于部署也需要有所了解.本次就介绍前端基础的项目部署.本次使用的是阿里云服务器进行的部署部署核心步骤 1.准备打包好的前端代码(dist包)或者是一个h ...
个人网站搭建保姆级教程（2）- 前端工程umi脚手架搭建
前言最近搞了个服务器,想着自己做个网站的脚手架,因为自己是纯前端新手,而且半路出家,中途踩了好多坑,准备写5篇给各位大佬们分享一下,如何从0搭建个人网站服务器购买与环境搭建前端工程umi脚手架搭 ...
vue项目前端服务器,【前端技术】vue自动部署项目到服务器
想要的功能前端打包之后自动上传文件夹到服务器在不提交代码的前提下,也可以完成上述功能经过各种百度谷歌,最后有两种方案可以选择第一种是写一个shell,通过lftp上传文件夹,但是会有个权限的问 ...
多个 VUE 前端工程部署设置、nginx 代理配置
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:早期我只有一个 VUE 前端工程:gentle-vue ,加一个 java 后端工程:gen ...
linux部署python web项目详细_在linux服务器下部署python工程（爬虫）
---恢复内容开始--- 这两天部署这个工程 ,真的是心力交瘁惹. 如果有用到爬虫的话,python环境先配好,如果是 python3的话 beautifulsoup 可以参见 http:/ ...

云端服务器部署前端工程

原理

条件

具体步骤

这就部署好了！

云端服务器部署前端工程相关推荐

最新文章

热门文章