IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 系统运维 -> Mac Vue 项目上传到阿里云服务器及 nginx -> 正文阅读

[系统运维]Mac Vue 项目上传到阿里云服务器及 nginx

本以为很简单, 结果熬了大夜花十小时弄完, 希望能给大家带来帮助少走弯路

笔者环境: Mac + 云服务器 php 环境 + Vue 项目 + nginx

若未购买服务器, 请看另一篇搭建博客

一. 云服务器环境搭建

1. 去镜像市场

购买好服务器(或者准备用已有服务器搭建), 先点击’停止’, 再点击’更换操作系统’进入镜像市场

image-20220918020154450

image-20220918020132872

2. 选择 共享镜像 中后端条件和你项目相同的

image-20220918030555608

这里我前期的误区是因为后端 api 是有另一个服务器支持, 所以我直接用 os

如果直接用 os , 你需要下 nginx 和 相应的后端环境.

但如果你和我一样后端已经设置好(已经被搭建好的服务器支持), 直接选共享镜像的前几个环境就行(注意有的要收费)

3. 使用 shell 工具

终端或其他你习惯的也行, 我用的是阿里云的, 点击远程连接根据你的系统下载

image-20220918192344902

image-20220918192428307

接下来软件登录需要使用 assess id, 根据提示来(这一步根据你 shell 软件要求的来)

image-20220918020508528

3. 连接实例下载 nginx

验证通过后选择实例(如果看不到估计是你没选对地区), 进入 ssh 命令

如果是使用 os 镜像(即没有使用公共镜像), 下载 nginx

有两种下载方式, 查阅文章和实践后, 感觉直接 yum 就行

详情见下方链接

https://juejin.cn/post/6844904134345228301

4. 配置 nginx

os8 的 nginx 没有 sites-available, 所以需要自己添加

如果用的 Cenos 7, 是没有sites-availble 的

https://zhuanlan.zhihu.com/p/500061428

新手向, 我的 domain.com 配置如下, 里面的信息根据本地文档调试

server {
        listen 80;
        listen [::]:80;
        server_name 123.com;

        root /var/www;

        index index.html;

        location / {
                try_files $uri $uri/ @router;
                index index.html;
        }
                        
        location @router {
                rewrite ^.*$ /index.html last;
        }               
}       

记得使用 nginx -t 检查文件

可能会有个 80 的错误看第三点坑点

使用 nginx -s reload 重载文件

二. Mac 环境项目相关

1. 下载 homebrew

详情见

https://blog.csdn.net/weixin_46358949/article/details/126922190

2. 安装 nginx

brew install nginx

3. 配置 nginx

cd /usr/local/etc/nginx
code nginx.conf

如果 code 指令无效, 看第三点坑点

4. vue 项目相关

将项目 npm run build

接下来将npm run build 后的 dist 中的文件拷贝到nginx 的www下

终端进入 dist , 再使用

cp -r * /usr/local/var/www

终端输入nginx, 即成功本地 8080 使用

5. vue 脚本配置

在根目录下(不是 src) 创建脚本 depoly.sh

#!/bin/bash

echo "build 生成生产环境代码"

rm -rf dist && npm run build

echo "上传代码到云主机"

cd dist && scp -i ~/.ssh/key.pem -r *  root@主机公共ip地址:/var/www

6. key.pem配置即使用

在阿里云控制台云主机左侧栏的网络安全点击密钥对

image-20220918202639071

我们直接创建密钥对, 建议选字母名称,会自动下载到本地

接下来在终端到~/使用

cd .ssh

进入.ssh文件夹, 将下好的 pem 放进去

接下来的操作见

https://www.runoob.com/w3cnote/mac-os-ssh-pem.html

7. 终端操作

在项目终端使用

sh ./depoly.sh

就会自动把文件上传上去

三. 坑点

1. 本地出现 zsh: command not found: code

image-20220918013246947

选择 shell command 并 install

那么参考

https://blog.csdn.net/lxyoucan/article/details/112651085

2. 出现 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

https://blog.csdn.net/wd2014610/article/details/85639741

3. 出现 [::]:80 failed (97: Address family not supported by protocol)

vim 进这个文件 注释掉就好了

  系统运维 最新文章
配置小型公司网络WLAN基本业务(AC通过三层
如何在交付运维过程中建立风险底线意识,提
快速传输大文件,怎么通过网络传大文件给对
从游戏服务端角度分析移动同步(状态同步)
MySQL使用MyCat实现分库分表
如何用DWDM射频光纤技术实现200公里外的站点
国内顺畅下载k8s.gcr.io的镜像
自动化测试appium
ctfshow ssrf
Linux操作系统学习之实用指令(Centos7/8均
上一篇文章      下一篇文章      查看所有文章
加:2022-09-21 01:04:54  更:2022-09-21 01:08:36 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/15 9:26:10-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码