Содержание блога
Программы на C++ можно размещать на своём сайте для портфолио. Плюс запуска в браузере в том, что вам не нужно заботиться о сборке исполняемых файлов под различные операционные системы и платформы. Ваша программа запустится в один клик на любой ОС и даже на мобильном устройстве. EXE многие опасаются скачивать из-за возможных вирусов. Сложно и долго собирать исполняемые файлы для всех ОС при изменениях в приложениях. Эта инструкция для Windows, но она вполне подойдёт для Linux и MacOS с некоторыми поправками. Установим необходимые инструменты и запустим "Hello, Word!" в браузере на С++.
Установка Git
У вас должен быть установлен Git. Если у вас его нет, то скачайте и установите. Наберите в поисковике браузера: git download Скачать можно по ссылке: https://git-scm.com/downloads Git понадобится для установки emsdk, об это ниже.
Установка MinGW
Проверьте, установлен ли MinGW. Для этого введите в консоли: mingw32-make -v Должна быть выведена версия MinGW. Например, у меня выводится "GNU Make 4.2.1". Возможно у вас установлен Qt с MinGW. Например, у меня MinGW установлен вместе с Qt, поэтому я добавил следующий путь в переменную окружения Path: C:\Qt\Tools\mingw1120_64\bin Если MinGW у вас не установлен, то его можно поставить отдельно. Например, перейдите можете скачать эту версию: GCC 11.2.0 + MinGW-w64 10.0.0 Либо выберите другую по ссылке: https://winlibs.com/ Вы можете извлечь архив на диск C в папку mingw64. Добавьте этот путь в в переменную окружения Path: C:\mingw64\bin Для вызова диалогового окна Path можно скопировать и выполнить следующую команду в консоли: rundll32 sysdm.cpl,EditEnvironmentVariables Откройте новую консоль и проверьте, что работает команда вывода версии: mingw32-make -v
Установка emsdk
Для компиляции С++ в файлы браузера нужен Emscripten SDK (Software Development Kit)
- Для скачивания Emscripten SDK перейдите в папку, куда вы хотите установить emsdk. Можно перейти в корень диска С и установить в папку emsdk. Для открытия консоли в Windows можно в адресной строке пути файла набрать cmd и нажать Enter
- В CMD скопируйте следующую команду: git clone https://github.com/emscripten-core/emsdk.git и нажмите Enter. На диске C будет создана папка emsdk в которую будут скачены файлы emsdk
- Перейдите в папку emsdk с помощью CMD, набрав: cd emsdk
- Наберите следующую команду для установки специфичной версии: emsdk install 3.1.37 Эта версия работает с SDL3 и она рекомендована для Qt 6.6.3 Таблицу для Qt можно посмотреть здесь: https://doc.qt.io/qt-6/wasm.html В таблице можно увидеть, что для Qt 6.7 необходима версия emsdk 3.1.50 Я не пробовал Qt 6.7 и не пробовал emsdk 3.1.50 для SDL3
- Наберите команду активации специфичной версии: emsdk activate 3.1.37
Установка Node.js и локального сервера http-server
- Скачайте и установите Node.js: https://nodejs.org/en/download/prebuilt-installer
- Откройте CMD в какой-либо папке - неважно и введите команду: npm i -g http-server Будет установлен инструмента для запуска локального сервера. Локальный сервер нужен для запуска приложений локально в браузере. Если вы попытаетесь запустить собранное веб-приложение в браузере двойным кликом по index.html, то оно не запустится
Компиляция и запуск "Hello, World" в браузере
- Создайте папку, например, с именем "hello-world", где-нибудь на жёстком диске с файлом main.cpp для программы и скопируйте в него программу:
| C++ | 1
2
3
4
5
6
7
| #include <iostream>
int main()
{
std::cout << "Hello, World!" << std::endl;
return 0;
} |
|
- Рядом с файлом main.cpp создайте пустую папку с именем public
- В папке с main.cpp откройте CMD, набрав, cmd в адресной строке папки и введите команду: emcc -g main.cpp -o public/index.html
- В папке public будут созданы файлы необходимые для запуска в браузере: index.html, index.js и index.wasm
- Папку public можно загрузить на бесплатный хостинг www.netlify.com с бесплатным доменом третьего уровня простым перетаскиванием мыши. Данный пример в браузере: https://hello-world-emscripten.netlify.app/
- В папке, где находится main.cpp запустите команду в консоли: http-server -c-1 Ключ -c-1 нужен, чтобы браузер не кешировал файлы при обновлении страницы
- Перейдите в браузер и наберите localhost:8080 Приложение будет запущено
- Бывает, что ключ -c-1 не помогает и браузер всё равно кеширует файлы. Надёжнее перезапускать страницу в отладочном режиме браузера. Для этого перейдите в режим разработчика в браузере, для этого нажмите: Ctrl+Shift+J (в Chrome и Edge). Откроются инструменты разработчика. Слева от адресной строки вы видите круговую стрелку для перезагрузки страницы. Кликните правой кнопкой мыши по этой кнопке и выберите "Empty Cache and Hard Reload". Кеш страницы будет очищен и запустится текущая версия приложения
Бесплатные хостинги для размещения своих приложений
- https://www.netlify.com/ - самый простой хостинг. Приложения не засыпают, как на Glitch и Render (о них ниже) Создавайте новое веб-приложение и перекидывайте мышкой папку public в него. Меняйте адрес приложения в настройкам. Будет такой домен третьего уровня: www.app-name.netlify.com
- https://github.com/ Создайте репозиторий и именем вашего аккаунта и github.io, например: your-name.github.io Это будет вас сайте, где вы можете создавать папки для ваших приложений.
- https://bitbucket.org/ Тоже самое, что и https://github.com/ Создавайте свой сайт с именем your-name.bitbucket.io
- https://gitlab.com/ Тоже самое, что и https://github.com/ Создавайте свой сайт с именем your-name.gitlab.io
- https://glitch.com/ На этом хостинге можно писать серверную часть на JavaScript и Node.js. Приложение засыпает если им сколько-то десятков минут не пользуются. Серверная часть будет всегда открыта другим на бесплатном плане. Когда закинете мышкой файл .wasm он окажется в папке Assets. Его нужно переместить в корень. Для этого кликните правой кнопкой файлу .wasm в папке Assets. Скопируйте "Image Address". Отройте терминал на Glitch и введите wget image_address (вместо image_address скопируйте путь, но удалите в пути символы связанные с рисунком
- https://render.com/ тоже самое, что и Glitch, только серверная часть скрыта от других, но обязательно нужна серверная часть, хотя бы для запуска public, например:
app.js
| JavaScript | 1
2
3
4
5
6
7
8
9
10
| import express from "express";
import http from "http";
import path from "path";
const app = express();
app.use(express.static(path.join(process.cwd(), "public")));
const httpServer = http.createServer(app);
const port = process.env.PORT || 3000;
httpServer.listen(port, () => console.log("Listening at port: " + port)); |
|
Для запуска своего сервера выше на Node.js нужно локально установить пакеты: npm i express http Это пример для общего понимания, как захостить на Render, но Render лучше использовать если вам нужна серверная часть, например, для базы данных или для игры по сети с использованием вебсокетов.
|
