服务器

购买服务器

  • https://www.aliyun.com/product/ecs?spm=5176.6660585.h2v3icoap.14.496e6bf8b6KqcF
  • 购买香港节点(域名不需要备案)
  • 系统选择的是 CentOS 8,或者其它系统

域名解析

这个域名在哪接入的就在那个地方做解析就可以了,可以添加一条 A 记录,让域名解析到你所购买的服务器

远程登录服务器

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 查看出错日志

部署 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

自动部署

Github Actions

  • 创建远程仓库
  • 个人设置-Developer settings-Personal access tokens
    • e0ff11544b8eb0e101e4defa470527b6d92d9c53
  • 项目设置-Secrets
git tag v0.1.0
git push origin v0.1.0

vue host配置_从零开始部署一个 vue 项目相关推荐

  1. 2 snippets vue 修改配置_教你发布vue+.netCore项目到服务器

    最近一直在做项目,发布部署的事情都是同事或者老大做的,无奈什么事都要自己尝试经历后才能记住,所以发布的事情轮到我了,由于是第一次发布部署项目到一个新的服务器环境,难免会遇到各种各样的问题,总结下来,希 ...

  2. vue请求在退出页面还执行吗_如何用 Cloudbase Framework 部署一个 Vue 项目

    无需修改业务代码,就能将 Vue 应用前后端一键托管部署在云开发平台~ Cloudbase Framework 是云开发官方出品的前后端一体化部署工具.目前已经 开源 . 关于 Cloudbase F ...

  3. 项目如何用jetty运行_如何用Cloudbase Framework部署一个Vue项目?

    Cloudbase Framework 是云开发官方出品的前后端一体化部署工具,无需修改业务代码,就能将 Vue 应用前后端一键托管部署在云开发平台.借助于 Cloudbase Framework,你 ...

  4. 从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)

    从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...

  5. 从零开始创建一个vue项目 1

    从零开始创建一个vue项目 创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...

  6. 从零开始编写一个vue插件

    title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...

  7. Vue复习知识点(理解MVVM模式、Vue实例配置的各选项、Vue的各种内置指令....)

    Vue复习知识点 一.理解MVVM模式 VVM是一种设计模式,它将应用程序分为三个部分:模型(Model).视图(View)和视图模型(ViewModel).它的主要目的是将应用程序的界面逻辑与业务逻 ...

  8. 安装uve-cli,并使用vue ui可视化界面创建第一个vue项目

    安装vue-cli,并使用vue ui可视化界面创建第一个vue项目 下载vue-cli ,因为国内下载镜像比较慢,使用阿里的镜像仓库 npm install -g cnpm --registry=h ...

  9. 从零开始创建一个uni-app项目

    从零开始创建一个uni-app项目 新建项目 目录说明 文件结构 安装uview 安装ucharts 新建项目 创建uni-app项目首先要下载HBuilder X,HBuilderX下载地址: 下载 ...

  10. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

最新文章

  1. ZooKeeper简单使用
  2. Python小知识 | 这些技能你不会?(一)
  3. freemarker 概述
  4. 【PAT甲级 一个字符数组是否被另一个包含】1092 To Buy or Not to Buy (20 分) C++
  5. 你的项目刚刚启动?是时候考虑Globalization了!
  6. 计算机大学生个人特长范文,计算机大学生个人简历范文
  7. linux中配置tomcat
  8. 3Dshader之球形环境映射(sphere environment mapping)
  9. PPPoE原理和实验
  10. 459.重复的子字符串
  11. echarts制作迁徙图
  12. css3实现椭圆轨迹运动
  13. 互联网金融的普惠之道
  14. rxjs ajax query,rxjs入门之ajax封装
  15. mysql cast numeric_(转载)mysql decimal、numeric数据类型
  16. 按文件名批量分类文件到文件夹
  17. Sparkling Logic SMARTS 实时决策分析模块介绍
  18. 【牛客网笔试】:Python实现:将i am a student转换成 student. a am i
  19. 一对一直播怎么开发?一对一直播app开发关键点
  20. C语言for循环能不能定义,关于for循环的格式

热门文章

  1. 数值分析(10)-数值微分
  2. ES6-异步async await学习
  3. 【转载】C#, VB.NET如何将Excel转换为PDF
  4. 9-4-插值查找-查找-第9章-《数据结构》课本源码-严蔚敏吴伟民版
  5. 冒泡排序(数组排序不用Array.Sort)
  6. HOJ 2739 The Chinese Postman Problem
  7. POJ 1002 电话号码字符串处理
  8. JS 回调(CallBack)
  9. 06手机消费趋势ZZ
  10. dataframe先分组再画图