vue host配置_从零开始部署一个 vue 项目
服务器
购买服务器
- https://www.aliyun.com/product/ecs?spm=5176.6660585.h2v3icoap.14.496e6bf8b6KqcF
- 购买香港节点(域名不需要备案)
- 系统选择的是 CentOS 8,或者其它系统
域名解析
这个域名在哪接入的就在那个地方做解析就可以了,可以添加一条 A 记录,让域名解析到你所购买的服务器
![](/assets/blank.gif)
远程登录服务器
ssh <服务器账号名,一般是root>@<服务器ip地址或者域名(解析到当前服务器)>
SSH 免密登陆
- http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html
- 客户端操作
- 使用 scp 的时候路径中不能有中文 !
# 生成密钥对
cd C:UsersAdministrator.ssh
# 客户端生成公钥和私钥的命令
ssh-keygen
# 把公钥拷贝到服务器
scp nllcoder_com_rsa.pub root@nllcoder.com:/root/.ssh
- 客户端操作---修改本机的 .ssh/config 文件
C:UsersAdministrator.sshconfig
Host nllcoder.com
HostName nllcoder.com
User root
PreferredAuthentications publickey
IdentityFile C:UsersAdministrator.sshnllcoder_com_rsa
- 服务器
cd ~/.ssh
# 找到 authorized_keys 文件
# 把 nllcoder_com_rsa.pub 文件内容追加到 authorized_keys 文件末尾
cat >> authorized_keys < nllcoder_com_rsa.pub
服务器环境配置
- 使用 nvm 安装 Node.js
- https://github.com/nvm-sh/nvm
# 查看环境变量
echo $PATH
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
# 重新连接 ssh
nvm --version
# 安装 Node.js lts
nvm install --lts
# 查看环境变量
echo $PATH
- 安装 pm2
npm i pm2 -g
- pm2 log xx 查看出错日志
![](/assets/blank.gif)
部署 Vue.js 项目
- www.bt.cn
安装 Nginx
yum install nginx
which nginx
nginx -v
# 启动 Nginx
nginx
nginx -s reload
nginx -s stop
# 检查配置文件是否 ok
nginx -t
Nginx 配置
- 备份配置文件
- cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.backup
- 修改配置文件路径
- vim /etc/nginx/nginx.conf
- 当配置文件修改之后,要重启 nginx !!!!!!!!!!
- 查看错误日志
- cat /var/log/nginx/error.log
部署 Vue.js 项目 - Node.js
- 查看运行 nginx 进程的账号
ps aux | grep nginx
- 更改 www 目录的所有者
chown nginx:nginx -R /home/www
Github actions 部署
- 安装 git
yum install git
- YML
name: Publish And Deploy Demo
on:push:branches: - master
jobs:build-and-deploy:runs-on: ubuntu-lateststeps:# 部署到服务器- name: Deployuses: appleboy/ssh-action@masterwith:host: ${{ secrets.HOST }}username: ${{ secrets.USERNAME }}password: ${{ secrets.PASSWORD }}port: ${{ secrets.PORT }}debug: truescript: |cd /tmpgit clone http://github.com/goddlts/vue-deploy-demo.gitcd /tmp/vue-deploy-demochmod +x ./deploy.sh./deploy.sh
- deploy.sh
#!/bin/bash
# 安装依赖
npm install
# 打包
npm run build
# 删除 ngnix 指向的文件夹下得文件
rm -rf /home/www/*
# 将打包好的文件复制过去
mv /tmp/vue-deploy-demo/dist/* /home/www
# 删除 clone 的代码
rm -rf /tmp/vue-deploy-demo
- 如果 nginx 启动失败,查看错误日志,权限问题,使用下面方式解决
# 查看错误日志
cat /var/log/nginx/error.log
cd /home/www
# 更改 www 目录的所有者
chown nginx:nginx -R .
部署 Nuxt 项目
手工部署
- baseURL: https://conduit.productionready.io
- .nuxt
- static
- nuxt.config.js
- package.json
- package-lock.json
- pm2.config.json
# 服务器 home 下创建 realworld 文件夹
mkdir realworld
# 本地运行, 注意 scp 命令使用的时候,路径中不能有中文!!!!!!!!!!!!!
scp ./release.zip root@47.242.35.65:/home/realworld
cd realworld
# 安装 unzip
yum install unzip
# 服务器上解压
unzip release.zip
# 查看隐藏目录
ls -a
# 安装依赖
npm i
# npm run start
pm2 start pm2.config.json
pm2 stop xxxx
pm2 log RealWorld
服务器开放端口 - 3000、80
![](/assets/blank.gif)
自动部署
Github Actions
- 创建远程仓库
- 个人设置-Developer settings-Personal access tokens
- e0ff11544b8eb0e101e4defa470527b6d92d9c53
- 项目设置-Secrets
git tag v0.1.0
git push origin v0.1.0
vue host配置_从零开始部署一个 vue 项目相关推荐
- 2 snippets vue 修改配置_教你发布vue+.netCore项目到服务器
最近一直在做项目,发布部署的事情都是同事或者老大做的,无奈什么事都要自己尝试经历后才能记住,所以发布的事情轮到我了,由于是第一次发布部署项目到一个新的服务器环境,难免会遇到各种各样的问题,总结下来,希 ...
- vue请求在退出页面还执行吗_如何用 Cloudbase Framework 部署一个 Vue 项目
无需修改业务代码,就能将 Vue 应用前后端一键托管部署在云开发平台~ Cloudbase Framework 是云开发官方出品的前后端一体化部署工具.目前已经 开源 . 关于 Cloudbase F ...
- 项目如何用jetty运行_如何用Cloudbase Framework部署一个Vue项目?
Cloudbase Framework 是云开发官方出品的前后端一体化部署工具,无需修改业务代码,就能将 Vue 应用前后端一键托管部署在云开发平台.借助于 Cloudbase Framework,你 ...
- 从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
- 从零开始创建一个vue项目 1
从零开始创建一个vue项目 创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...
- 从零开始编写一个vue插件
title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...
- Vue复习知识点(理解MVVM模式、Vue实例配置的各选项、Vue的各种内置指令....)
Vue复习知识点 一.理解MVVM模式 VVM是一种设计模式,它将应用程序分为三个部分:模型(Model).视图(View)和视图模型(ViewModel).它的主要目的是将应用程序的界面逻辑与业务逻 ...
- 安装uve-cli,并使用vue ui可视化界面创建第一个vue项目
安装vue-cli,并使用vue ui可视化界面创建第一个vue项目 下载vue-cli ,因为国内下载镜像比较慢,使用阿里的镜像仓库 npm install -g cnpm --registry=h ...
- 从零开始创建一个uni-app项目
从零开始创建一个uni-app项目 新建项目 目录说明 文件结构 安装uview 安装ucharts 新建项目 创建uni-app项目首先要下载HBuilder X,HBuilderX下载地址: 下载 ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
最新文章
- ZooKeeper简单使用
- Python小知识 | 这些技能你不会?(一)
- freemarker 概述
- 【PAT甲级 一个字符数组是否被另一个包含】1092 To Buy or Not to Buy (20 分) C++
- 你的项目刚刚启动?是时候考虑Globalization了!
- 计算机大学生个人特长范文,计算机大学生个人简历范文
- linux中配置tomcat
- 3Dshader之球形环境映射(sphere environment mapping)
- PPPoE原理和实验
- 459.重复的子字符串
- echarts制作迁徙图
- css3实现椭圆轨迹运动
- 互联网金融的普惠之道
- rxjs ajax query,rxjs入门之ajax封装
- mysql cast numeric_(转载)mysql decimal、numeric数据类型
- 按文件名批量分类文件到文件夹
- Sparkling Logic SMARTS 实时决策分析模块介绍
- 【牛客网笔试】:Python实现:将i am a student转换成 student. a am i
- 一对一直播怎么开发?一对一直播app开发关键点
- C语言for循环能不能定义,关于for循环的格式