从0创建并部署一个网页到服务器

创建一个页面

1 下载node.js 下载VScode

2 在Windows下找一个路径新建一个文件夹  例如:D:\study_project\PersonalWeb

3 VSCodee中打开文件夹

4 Windows下 管理员身份打开命令提示符,执行npm install -g @vue/cli

5 VSCode下打开终端,执行下列命令 vue create myweb (myweb是项目的名字,名字中不能包含大写字母 否则会报错)

6 然后一直是默认选项 回车即可

然后就会看到项目路径下是这样的

7 打开VSCode终端 执行下列命令:npm run serve 启动开发服务器 然后打开下面的URL就能看到界面了

部署到服务器

我本机Windows,服务器是Ubuntu系统

1 远程连接服务器  ssh 用户名@123.249.88.177

输入密码 进入到根目录下

2 下载nginx

sudo apt update

sudo apt install nginx

完成后重启sudo systemctl start nginx

3 验证是否成功,在自己的浏览器输入自己的服务器IP显示界面如下

4 将自己的项目生成一个静态页面

npm run build

然后自己项目下就会有一个dist文件夹

5 把dist上传到自己的服务器

在服务器下新建一个路径,然后在项目本机执行如下命令

scp  -r  D:\study_project\PersonalWeb\myweb\dist  root@123.249.88.177:/home/myweb

先输入本地工程的路径 再输入你的服务器的用户名@IP:/路径

然后去服务器查看文件存在

6 配置nginx代理

Nginx的配置文件一般在根目录下,vim  /ect/nginx/nginx.conf

然后增加如下配置

7 检查 nginx -t

8 重启nginx  sudo systemctl restart nginx

9 在自己的浏览器输入IP:端口即可看到是否成功

相关推荐

  1. docker 部署运行一个服务

    2023-12-17 01:14:02       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-17 01:14:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-17 01:14:02       101 阅读
  3. 在Django里面运行非项目文件

    2023-12-17 01:14:02       82 阅读
  4. Python语言-面向对象

    2023-12-17 01:14:02       91 阅读

热门阅读

  1. Makefile:6: *** recipe commences before first target. Stop.

    2023-12-17 01:14:02       64 阅读
  2. wxWidgets:使用wxSplitterWindow类进行窗口分割编程

    2023-12-17 01:14:02       44 阅读
  3. LeetCode //C - 345. Reverse Vowels of a String

    2023-12-17 01:14:02       58 阅读
  4. 回调函数详解

    2023-12-17 01:14:02       63 阅读
  5. 聊聊AsyncHttpClient的SignatureCalculator

    2023-12-17 01:14:02       48 阅读
  6. 【Python基础】循环语句

    2023-12-17 01:14:02       54 阅读
  7. 会话技术+请求转发+重定向

    2023-12-17 01:14:02       56 阅读
  8. Delete、Truncate、Drop的区别有哪些,该如何选择

    2023-12-17 01:14:02       54 阅读
  9. uniapp组件map地图组件使用

    2023-12-17 01:14:02       56 阅读
  10. SpringBoot 3.0 升级之 Swagger 升级

    2023-12-17 01:14:02       53 阅读
  11. (第38天)RAC 修改 IP 信息

    2023-12-17 01:14:02       55 阅读
  12. 前端(二)

    2023-12-17 01:14:02       54 阅读
  13. 使用Python实现蒙特卡罗算法

    2023-12-17 01:14:02       54 阅读
  14. C#基础——面向对象(封装 继承 多态)

    2023-12-17 01:14:02       64 阅读